Jump to content

Firefox 1.5b2 bug?


cmpanas

Recommended Posts

I'm working my way through the book Stylin' with CSS and making a site for a friend as I go along.I have what looks to be a workable, kludge-free page based on a floating three-column design. Almost everything is groovy, except for one major aspect. In Safari everything looks great. In the most recent beta of FF 1.5, the right column is dropping way down from where it should be, and I can't for the life of me figure out why. The bastard div is div#right. Again, all good in Safari (i.e., lines up perfectly on the top with both the left and center columns) but in FF it shows up waaaay lower vertically than it should. Here is my CSS:

body {font:.75em "Trebuchet MS", Verdana, Futura, sans-serif;}c1 {color:#3366CC;}c2 {color:#6699CC;}div#mainwrapper {width:792px;margin:auto} /* add margin auto stuff if you want the layout centered */div#columnswrapper {float:left; width:792px;}div#header {width:792px; height:144px; margin-top:0; padding-top:0; text-align: left;}div#left {float:left; width:108px; padding-top:40px; margin-top:2px; margin-left:-414px; display:inline;}div#left ul {margin-top:0px; margin-left:0; text-align:right; list-style-type:none; }div#left a {text-decoration: none; color:#666666;}  div#left a:hover {color:#CA5C2C;}div#center {float:left; width: 270px; margin-left:252px; display:inline;}div#centerinner {margin-top:40px;}div#right {float:left; width:126px; padding-top:40px; margin-top:2px; margin-left: 36px; font-size:.90em; display:inline;}div#footer {text-align:center;}.clearthis {clear:both;}

Any advice would be very appreciated, and feel free to kick my ###### if I'm making any other stupid choices.

Link to comment
Share on other sites

I do not understand why it is floated left, along with the other left floated divs.In your markup, ust make sure you have a float: left div first, then the float: right div, then the content div (with margin if wanted).

F-Man, thanks for the reply. I have had it center div, then left then right in my mark-up (using a negative margin with the left/nav div to push it into the right spot) because I've read in a few places that it's best to put the center column first in the mark-up (the only reason I can recall at the moment is that search engines index stuff more heavily the further up the page they are). As far as putting a float:left in the right column, that's because when I put float:right before it pushed the column way too far to the right in both Safari and Firefox. My friend designed the site in terms of how he wants it to look graphically. He wants the right column to be a specific distance to the right of the center column.Anyway, I just took your advice and put left div then right div then (changing the float to right as well) and then the center. Unfortunately the left/nav column disappears altogether and the right column is pushed too far to the right again in both Safari and Firefox (but on the plus side it has come back up to where it should be vertically in Firefox).Well, when I greyed out the lines adding in a footer that stretched across all three columns, everything was fixed. Even stranger, when I added back in the footer, everything is still working in Safari and Firefox. I'm using float:right in the right div, as you said, and I set a large margin:right on it to tuck it in. I'm still going center, left, right in the mark-up though. Is there a reason I should change that order if everything seems to be working?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...