Page 1 of 1

[SOLVED-ish]Odd Issue with IE 7.0

Posted: Wed Jun 27, 2007 5:54 pm
by idevlin
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


First of all please forgive me if this has already been posted and answered. If it has, please just point me in the direction of the post. I did search for it, but found nothing.

Right, I'm having this odd issue with Firefox 2.0.0.4 and Internet Explorer 7.0.5730.11. Basically, the code below, is different sizes in the two different browsers. Safari for Windows displays it the same way as Firefox, only IE is different

[syntax="html"]
<html>
<head>
<style type="text/css">

ul#list {
   position:absolute;
   margin:5px auto 10px auto;
   left:22%;
   top:715px;
   width:726px;
   font-family: Verdana;
   font-size:10px;
	   
   border:1px solid #000;
}
     
ul#list li{
    float:right;
    display:inline;
    color:#000;
    list-style-type:none;
}
</style>
</head>

<body>

<ul id="list">
<li>test</li>
</ul>

</body>

</html>
Adding in:[/syntax]

Code: Select all

*width:value px;
where value is set to the correct value for IE, causes it to be displayed properly as it's picked up by IE only. However, it's not valid CSS.

Has anyone else come across this? And if so, what valid CSS could fix it?

Many thanks in advance.

Ian


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Jun 27, 2007 7:12 pm
by superdezign
Which part of it doesn't size correctly? The list items?

Posted: Thu Jun 28, 2007 2:53 am
by idevlin
superdezign wrote:Which part of it doesn't size correctly? The list items?
Sorry, I should have been more explicit.
The entire list. In IE th ewidth is being displayed shorted than in Firefox and Safari. In IE I need to enter a width of 755px to get it to look the same as it does in Firefox and Safari, where it has a width of 726px.

I'm sure that I'm either doing something silly or this is a known IE 7.0 bug that is easily fixed.


feyd: sorry, I did try and post it with the correct HTML syntax but it started entering a table and all kinds of crap so I left it, as it was late and I wasn't in the mood to figure out what was wrong with it. My apologies.

Posted: Thu Jun 28, 2007 8:05 am
by matthijs
Have you set the margin and padding of both ul and li to zero?

Different browsers have different default values for elements, especially list elements. So always reset everything to zero and then start adding what you want.

For a list you should not need a css hack to get everything displayed properly.

Posted: Thu Jun 28, 2007 8:20 am
by idevlin
matthijs wrote:Have you set the margin and padding of both ul and li to zero?

Different browsers have different default values for elements, especially list elements. So always reset everything to zero and then start adding what you want.

For a list you should not need a css hack to get everything displayed properly.
Well no, they weren't set to 0, padding certainly wasn't. I gave up though and have got it all to work using div's instead, so I'll mark this as solved, even though it isn't completely :D

Posted: Thu Jun 28, 2007 9:40 am
by matthijs
That's a shame really, don't give up so soon. Because a list is something so simple and it is easy and possible to style consistently in all modern browsers plus IE6 and IE7.

You are aware of the fact that IE6 and lower can have issues with the box model?

Posted: Thu Jun 28, 2007 10:50 am
by pickle
I'm not sure if IE7 has a quirks mode or not, but setting the DOCTYPE might fix your problem.

Posted: Thu Jun 28, 2007 12:04 pm
by idevlin
matthijs wrote:That's a shame really, don't give up so soon. Because a list is something so simple and it is easy and possible to style consistently in all modern browsers plus IE6 and IE7.

You are aware of the fact that IE6 and lower can have issues with the box model?
I know, I just wasn't in the mood to mess about with it anymore :D

Yeah, I'm more than aware of IE6< and it's lovely box model!
pickle wrote:I'm not sure if IE7 has a quirks mode or not, but setting the DOCTYPE might fix your problem.
I have the DOCTYPE set to:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

Posted: Thu Jun 28, 2007 12:33 pm
by matthijs
Not sure if it has anything to do with your problem: but why do you have float:right; display:inline; ? Usually you would float:right;display:block;width:xxx; or set display:inline;

Posted: Thu Jun 28, 2007 1:18 pm
by idevlin
matthijs wrote:Not sure if it has anything to do with your problem: but why do you have float:right; display:inline; ? Usually you would float:right;display:block;width:xxx; or set display:inline;
To be honest, I borrowed the code from someone else's site and it seemed to work there but not on mine. I knew it was a daft idea, 'cause then you've never developed it yourself and don't know what's causing what!

Posted: Thu Jun 28, 2007 1:49 pm
by matthijs
here's a good link about lists and css http://css.maxdesign.com.au/listutorial/

Posted: Thu Jun 28, 2007 3:44 pm
by idevlin
matthijs wrote:here's a good link about lists and css http://css.maxdesign.com.au/listutorial/
Cool, thanks for that. I'll add it to my list of useful sites and check it out. Thanks again.