[SOLVED-ish]Odd Issue with IE 7.0

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

[SOLVED-ish]Odd Issue with IE 7.0

Post 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]
Last edited by idevlin on Thu Jun 28, 2007 8:21 am, edited 1 time in total.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Which part of it doesn't size correctly? The list items?
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

I'm not sure if IE7 has a quirks mode or not, but setting the DOCTYPE might fix your problem.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Post 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">
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

here's a good link about lists and css http://css.maxdesign.com.au/listutorial/
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Post 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.
Post Reply