Okay so I'm redisigning my site (here: http://d-gression.trap17.com/new/index2.html) and need help with the CSS that makes the main content. On IE it works which scares me because I'd much rather have it work on FireFox. So here's the CSS I used:

 

 

 

Reply

I only get a one-line page showing there. Do you have another link?

What about a listing of the html code?

Also, it is easier to design the site so it works in Mozilla / Firefox correctly and then hack it for IE, so don't even look at it in IE until you get what you want in FF.
Run the page through the w3c.org validator to see what it says as well.
Make sure you include a correct Doc Type Declaration at the top of the page.

Reply

Sorry about the link I guess the forum included the ) anyway here is the real link:
http://d-gression.trap17.com/new/index2.html
now I guess I'll include the HTML:

The W3C CSS validator says only stuff about background-color not being complimented with color, I'll fix that later, and the HTML validator just says it's not a valid 4.0 transitional page, If someone could help with that, but I'm not to worried right now. Anyway I do try to develop for FF, but I like to see wat it looks like in IE at the same time, the only reasion I mentioned IE at all is that is how it should look I can't seem to get the FF page to look like that, (the olive green block should encompas the grey content areas)
And If I get rid of the two floats then the grey boxed go inside the olive green area, but the olive green only showes around the sides not the top.

 

 

 

Reply

Add a margin to the content div greater than the fixed width of the sidebar ( menu) and in the same direction shoud help to solve the problem.



And eliminate the float: right for the content div.

Try it and post back if there is any problem with that.

Reply

Actually, there are a couple of other things I would change. Here is a css and html code block to look at. It would be more typical to change the div's to named div's (id=) rather than classes (class=), but I left them as classes for this sample. Adjust the gappage between the menu and content by changing the values for the width of the menu and the margin-left of the content. If you set the width of the frame div to 100% , this would allow the page to adjust to fill the whole display rather than the fixed pixel width.

CSS:



HTML:



Try this to see if it works for you. It validates.

Reply

Sorry I like my pages fixed to a certian pixlage, mainly because I like my image the size it is. If the image would scale nicrly then maybe, but not the way it is currently. What you said about makeing the margin for the left sounded quite clever. Unfortunatly it didn't quite work, the main content still doesn't have an olive green margin on the top and bottom but the floated menu DIV does and If I make the ceontent shorter the nthe menu then it floats right over the olive green cell.
I thought about removing the olive green all together and making it a border on a content cell, however when I did that the border worked again on firefox adding the 5px to the outside howeveron IE the 5px were added the the middle so there was a 5px shortage. If you know I way to combat this problem that might solve a few problems.
I also have an image which is simply an olive green square that I can position in the background 150ish px from the left and repeat-y to make a division in the middle I just don't know how to accomidate the writing after that.

Reply

Thank you very much jlhaslip, but I realised that the reason my page wasn't displaying properly was because theings that wern't floated were not part of the document flow and floated things would be rendered seperate.

Again Thanks

Reply

To get the margins back, simply change the margin in the body selector back to 5px or create a new selector where you want the margins. Play with it.

Also, simply change the sizes back to px will work, too. The div.content margin-left has to be larger than the width of the div.menu sidebar to work properly.

Reply