| | |
Unordered List (UL) causing me problems in IE
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Feb 2006
Posts: 30
Reputation:
Solved Threads: 0
Hi all, i was hoping someone here could clue me in to what i have done wrong with my code, all i'm after is a simple left to right image gallery showing a row of photos.
I'm a mac user so i was able to check the results in Firefox, Safari and Opera and it displayed just fine, exactly as i wanted it, but when i finally got to check it on Internet Explorer the other day i found that the unordered list images slope down to the right, it's very annoying and i can't seem to get it to display right.
Here is the code:
And here is a link to the site it is on: bgirl-firefly.co.uk
I'm thinking of installing Boot Camp on my mac in order to test my sites in IE rather than waiting a few days before i can get access to a PC, this sort of thing happens to me far too often and i'm sick of it, bloody useless IE, why must you cause me so many headaches??
Any help is greatly appreciated, cheers. :-)
I'm a mac user so i was able to check the results in Firefox, Safari and Opera and it displayed just fine, exactly as i wanted it, but when i finally got to check it on Internet Explorer the other day i found that the unordered list images slope down to the right, it's very annoying and i can't seem to get it to display right.
Here is the code:
HTML and CSS Syntax (Toggle Plain Text)
HTML <ul class="photos"> <li class="photo01"><a href="gallery01.html"></a></li> <li class="photo02"><a href="gallery02.html"></a></li> <li class="photo03"><a href="gallery03.html"></a></li> <li class="photo04"><a href="gallery04.html"></a></li> <li class="photo05"><a href="gallery05.html"></a></li> <li class="photo06"><a href="gallery06.html"></a></li> </ul> CSS .photos { list-style-type: none; height: 112px; } .photos li a { display: block; float: left; margin-left: 20px; } .photo01 a, .photo02 a, .photo03 a, .photo04 a, .photo05 a, .photo06 a, .classphoto01 a, .classphoto02 a, .classphoto03 a, .classphoto04 a, .classphoto05 a, .classphoto06 a { width: 78px; height: 112px; margin: 0px 5px 0px 5px; }
And here is a link to the site it is on: bgirl-firefly.co.uk
I'm thinking of installing Boot Camp on my mac in order to test my sites in IE rather than waiting a few days before i can get access to a PC, this sort of thing happens to me far too often and i'm sick of it, bloody useless IE, why must you cause me so many headaches??
Any help is greatly appreciated, cheers. :-)
please use your style sheets in another file and save it name.css
add this code in your html file
<link rel="stylesheet" type="text/css" href="name.css" />
and now check it
it's working in internet explorer also
add this code in your html file
<link rel="stylesheet" type="text/css" href="name.css" />
and now check it
it's working in internet explorer also
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Feb 2006
Posts: 30
Reputation:
Solved Threads: 0
Thanks for the quick response, but if you check the link i supplied and look at the source code you'll see i set up the css file separately in the first place when i started to build the site:
Like i say, when i check it on Windows Vista with the latest version of IE the list of photos still displays in a sloping down fashion instead of straight across, the same goes for when my friend checks it on her computer running Windows XP with IE 6, i don't know what it is that i've done wrong here.
HTML and CSS Syntax (Toggle Plain Text)
<link rel="stylesheet" type="text/css" href="firefly.css" />
Like i say, when i check it on Windows Vista with the latest version of IE the list of photos still displays in a sloping down fashion instead of straight across, the same goes for when my friend checks it on her computer running Windows XP with IE 6, i don't know what it is that i've done wrong here.
I didn't get in your reply wht r u asking second one
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Feb 2006
Posts: 30
Reputation:
Solved Threads: 0
My CSS file is separate from the HTML, i never included them together in the first place is what i said.
The problem however is still present, the photos do not display properly.
The problem however is still present, the photos do not display properly.
now i understood can you send me files with diffrent attachments like style sheets is diffrent and html file is diffrent i will give solution to this
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
•
•
•
•
My CSS file is separate from the HTML, i never included them together in the first place is what i said.
The problem however is still present, the photos do not display properly.
I think the way the photos are displayed in IE looks better than in firefox.
I like the slope style... But its ur web anyway...
Dont u think?
•
•
Join Date: Feb 2006
Posts: 30
Reputation:
Solved Threads: 0
I asked on another forum and this guy spotted the problem straight away, i just needed to insert this:
into the CSS file, problem solved.
HTML and CSS Syntax (Toggle Plain Text)
.photos li{display:inline;}
into the CSS file, problem solved.
The problem is in your style.
You have size styles and nonzero surrounding styles in the same style. This causes IE to behave differently than other browsers.
The other browsers put those 5px margins outside the 78px width, for a total width ofg 88px.
IE puts those 5px margins INSIDE the 78px width. This means the picture won't fit in the
space reserved for it. The browser drops into quirks mode, and tries to fit the pictures any way it can.
HTML and CSS Syntax (Toggle Plain Text)
....{width: 78px; height: 112px; margin: 0px 5px 0px 5px;}
You have size styles and nonzero surrounding styles in the same style. This causes IE to behave differently than other browsers.
The other browsers put those 5px margins outside the 78px width, for a total width ofg 88px.
IE puts those 5px margins INSIDE the 78px width. This means the picture won't fit in the
space reserved for it. The browser drops into quirks mode, and tries to fit the pictures any way it can.
Last edited by MidiMagic; Jun 14th, 2008 at 9:07 pm.
Daylight-saving time uses more gasoline
![]() |
Other Threads in the HTML and CSS Forum
- Previous Thread: Image position in Firefox vs Safari?
- Next Thread: I'm New.
Views: 2631 | Replies: 9
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl






