Margins, CSS and browsers

Margins, CSS and browsers (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

slbergh -> Margins, CSS and browsers (2/4/2005 14:22:42)
I noticed that there's a huuuuuuuge difference in how IE renders a margin applied through CSS and how Firefox does it. It's driving me batty! Here's the relevant portion of the CSS: #links { width: 185px; font-size: 75%; float: left;} #links h5 { font-size: 110%; margin-left:10px;} #links ul { margin-top:-10px; margin-left:15px; font-size:125%; padding-bottom: 5px; border-bottom: 1px solid #eee;} #links li { display: block; line-height: 130%; list-style-type: none; margin-left:0px;} #links li a { display: block; white-space: nowrap; margin-left: 0px;} #links li a.c { display: inline; font-weight: normal; text-decoration: none;} #links li a.c:hover { text-decoration: none; } In IE, everything lines up just as it should. In Firefox, however, the <li> text is moved way too far to the right and the items overlap the page text. The page itself is: http://www.ehs.iastate.edu/cms/default.asp?action=article&ID=26. Now, before anyone says anything, I know the page doesn't validate. I'm working with the creator of the new CMS I'm using to figure out how to get the system to handle little things like unencoded & and lowercase tags.

jaybee -> RE: Margins, CSS and browsers (2/4/2005 18:20:31)
FF, Opera, Mozilla all render the same, it's IE that's out. Can I give you a small piece of advice and it's up to you whether you take it or not but I found after a lot of heartache that it's much easier to design using FF and then fix the IE quirks. quote: I know the page doesn't validate. The reason we bang on about validating is that a daft mistake can throw everything out of whack, the validator would have caught it for you. Think of it more as an error checker to help you out rather than a "Ha Ha you can't write proper code" mickey taker. As soon as I've done the ground work on a page the first thing I do is run it through the HTML and CSS validators. It saves me hours of frustration. There are over 100 HTML errors in that page, many of them relating to css, so much so that the css validator won't even attempt to check it. Please, anyone who is reading this, try and take this on board........ HTML and CSS work together. An error in one can cause problems in the other. If you are having a layout problem then make sure your HTML and css are error free by running them through the validator.

jaybee -> RE: Margins, CSS and browsers (2/4/2005 19:05:41)

OK, it took me a little while to find it but the problem is in your html and your css.

First the css, you have id= all over the place and you're only allowed one of each. Change your # to . and id to class.

second, you have a div with an id of linklist that doesn't exist.

third, your top left menu list is just one item with a list tag at the beginning and the end. Each line should have the tags <li> </li> at hte start and end

fourth, your second left menu is missing all its </li> end tags.

<DIV id=links>
<DIV id=linklist>
<DIV id=links>
<H5>Topics</H5>
<UL>
<LI><!-- LOOPSTART --><a href="default.asp?action=article&ID=28">Animal Use</a>

<a href="default.asp?action=article&ID=31">Autoclaves</a>
<a href="default.asp?action=article&ID=33">Biohazardous Materials Security</a>
<a href="default.asp?action=article&ID=26">Biosafety Overview</a>
<a href="default.asp?action=article&ID=64">Sharps Safety Program</a>
<!-- LOOPEND --></LI></UL></DIV></DIV> 
<DIV id=links>
<H5>Quick Links</H5>
<UL>
<LI><A href="../newsletter.asp" longdesc="EH&S campus newsletter and searchable newsletter archives">Campus Newsletter</A> 
<LI><A href="http://www.ehs.iastate.edu/training/ebooks.htm" longdesc="E-books on various topics">E-books</A> 

<LI><A href="http://www.ehs.iastate.edu/admin/employment.asp" longdesc="Current job openings">Employment</A> 
<LI><A href="http://www.ehs.iastate.edu/forms.asp" longdesc="Forms">Forms</A> 
<LI><A href="http://www.ehs.iastate.edu/admin/news.asp" longdesc="News and News Archives">News</A> 
<LI><A href="default.asp?action=article&ID=25" longdesc="Search our website">Search</A> 
<LI><A href="http://www.ehs.iastate.edu/library.asp" longdesc="Manuals, booklets, newsletters, other publications">Safety Library</A> 
<LI><A href="http://www.ehs.iastate.edu/admin/directory.asp" longdesc="Staff contacts and biographical information">Staff Directory</A></LI></UL>
<UL>

That's why FF is complaining.

slbergh -> RE: Margins, CSS and browsers (2/4/2005 22:12:45)
Ugh! I had all the closing tags for the lists in there too! My new CMS is pulling them out. (It also changes all my lowercase tags to uppercase.)

Page: [1]

0.046875