<UL> browser differences.

[iisman]

OKay...so here it goes....

I have an unordered list. In IE, there is no blank line above it, however, FF displays one, as though there was a <br /> there.

Any ideas on how to get around that difference?

 

[cLFlaVA]

yeah, do something like this:

ul {
    margin-top: 2em;
    padding-top: 0;
}

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[iisman]

THanks! Guess I should have posted the UL css i was using...it is a little more complex than that.

css

.toplinks-ul li 			{list-style-type: none; margin-left: 0;	padding-left: 0; display: inline; margin-top: 2em; padding-top: 0;}
.toplinks-ul li a 			{display:block; padding-left: 15px; padding-bottom: 0px; padding-top: 3px; background: url('bluebullet.gif') no-repeat center left; color: #282484; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none}
.toplinks-ul li a:hover 	{background-image: url('orgbullet.gif'); color: #cb7901;}

This styles the ul with colored bullets that change on hover.

I tried to add in the css that you gave in your post, but it still didnt remove that one blank line at the top of the list.

 

[BillyRayPreachersSon]

Try this:

.toplinks-ul {
   padding-top: 0px;
   margin-top: 0px;
}

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

Note that you've got

.toplinks-ul li             {list-style-type: none; margin-left: 0;    padding-left: 0; display: inline; [red]margin-top: 2em;[/red] padding-top: 0;}

The top margin of the first <li> will push the whole <ul> down. The browser difference may be because you've declared <li>s to be [tt]display: inline[/tt] - I'm not sure that top & bottom margins are applied to inline elements by all browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

what does <br /> mean?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

i've just been googling and apparently it's the line break tag.

<br /> - I've never seen it with that syntax before.

i've only ever seen <br> and never had a problem with it not working. what's with the space and forward slash?

are there other tags that are meant to have this?

i'm thinking it's used with tags that don't have start and end i.e. <td> blah </td> so should hozizontal rule have a forward slash <hr /> ?

mad, how you can be coding HTML for over 6 years and never seen this before - lol

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[FesterSXS]

Closing tags like this are necessary for XHTML validation.

eg)

<meta name="" content="" />
<img src="" alt="" />
<br />
<hr />

Standard HTML does not require them.

Useful XHTML resource -

http://www.w3schools.com/xhtml/default.asp

Tony

 

[1DMF]

what's XHTML , eXstensible Hyper Text Markup Language, which means ? I know DHTML , all these anacronyms, doing my head in!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok so it's a clean XML based HTML, so someone can surf my site on their mobile phone.

hmmm, I don't have a mobile phone, and don't want to surf the net on one if i did.

Well not untill the technology catches up and the price comes down, by which time hand held devices WILL have the power and resources to read BAD HTML web pages.

is it really worth upgrading my code?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[iisman]

Hello All,

The following did fix the browser difference. It removed any spacing determined by the <ul> which browsers treated differently, and allowed me to use the <br /> tag to add a blank line that will be displayed the same by most browsers.

margin-top: 0px; padding-top: 0px;
[code]

To comment on 1DMF's posts:

You are right, depending on the purpose of what you are coding, to convert to xhtml would be pointless. (but if you have clean, clear valid HTML, or DHTML code, and use CSS to begin with, an upgrade to XHTML would be rather quick and painless.  I used it for what I was coding since I was coding from scratch, and not converting/updating old files.  Because of that, it only seemed logical to use something like XHTML.  Also, with XHTML, there is some general feeling out there that a properly designed XHTML page would give you greater cross-browser consistency.  It is also backward-compatible with older browsers.

 -Again, as always, it comes down to really anlyzing your sites purpose, audience, and intended use.  If these are clear, then decisions like this are very easy.

 

[1DMF]

Glad you sorted your problem, and thanks for the insight. You're probably right, i've spent a lot of time lately ensuring my HTML/JS/CSS is cross browser compatible (well except Opera is driving me mad!), so a cross to XHTML would be not as painfull as I first thought as realy it's a syntaxt thing, rather than a completely new language.

The jump from plain HTML to CSS has been more stressfull, and still my CSS is not as tight as i'd like, but at least it runs throught the W3C checker without complaint.

regards,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.