Unordered List (UL) causing me problems in IE

Thread Solved

Join Date: Feb 2006
Posts: 30
Reputation: punkrockbboy is an unknown quantity at this point 
Solved Threads: 0
punkrockbboy punkrockbboy is offline Offline
Light Poster

Unordered List (UL) causing me problems in IE

 
0
  #1
Jun 10th, 2008
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:
HTML and CSS Syntax (Toggle Plain Text)
  1. HTML
  2. <ul class="photos">
  3. <li class="photo01"><a href="gallery01.html"></a></li>
  4. <li class="photo02"><a href="gallery02.html"></a></li>
  5. <li class="photo03"><a href="gallery03.html"></a></li>
  6. <li class="photo04"><a href="gallery04.html"></a></li>
  7. <li class="photo05"><a href="gallery05.html"></a></li>
  8. <li class="photo06"><a href="gallery06.html"></a></li>
  9. </ul>
  10.  
  11. CSS
  12. .photos {
  13. list-style-type: none;
  14. height: 112px;
  15. }
  16.  
  17. .photos li a {
  18. display: block;
  19. float: left;
  20. margin-left: 20px;
  21. }
  22.  
  23. .photo01 a, .photo02 a, .photo03 a, .photo04 a, .photo05 a, .photo06 a,
  24. .classphoto01 a, .classphoto02 a, .classphoto03 a, .classphoto04 a, .classphoto05 a, .classphoto06 a {
  25. width: 78px;
  26. height: 112px;
  27. margin: 0px 5px 0px 5px;
  28. }

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. :-)
bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: Unordered List (UL) causing me problems in IE

 
0
  #2
Jun 11th, 2008
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
Thanx,
Shiriyal

http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 30
Reputation: punkrockbboy is an unknown quantity at this point 
Solved Threads: 0
punkrockbboy punkrockbboy is offline Offline
Light Poster

Re: Unordered List (UL) causing me problems in IE

 
0
  #3
Jun 11th, 2008
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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <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.
bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: Unordered List (UL) causing me problems in IE

 
0
  #4
Jun 11th, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 30
Reputation: punkrockbboy is an unknown quantity at this point 
Solved Threads: 0
punkrockbboy punkrockbboy is offline Offline
Light Poster

Re: Unordered List (UL) causing me problems in IE

 
0
  #5
Jun 11th, 2008
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.
bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: Unordered List (UL) causing me problems in IE

 
0
  #6
Jun 11th, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 52
Reputation: alimoe is an unknown quantity at this point 
Solved Threads: 2
alimoe's Avatar
alimoe alimoe is offline Offline
Junior Poster in Training

Re: Unordered List (UL) causing me problems in IE

 
0
  #7
Jun 11th, 2008
Originally Posted by punkrockbboy View Post
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.
Hey,
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?
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 3
Reputation: mmann is an unknown quantity at this point 
Solved Threads: 1
mmann mmann is offline Offline
Newbie Poster

Re: Unordered List (UL) causing me problems in IE

 
0
  #8
Jun 11th, 2008
I had the same problem in the past and fixed it by changing the px sizes slightly. It made no difference to the look and feel but did fix the IE issue. It took a little experimenting but it worked in the end.
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 30
Reputation: punkrockbboy is an unknown quantity at this point 
Solved Threads: 0
punkrockbboy punkrockbboy is offline Offline
Light Poster

Re: Unordered List (UL) causing me problems in IE

 
1
  #9
Jun 12th, 2008
I asked on another forum and this guy spotted the problem straight away, i just needed to insert this:

HTML and CSS Syntax (Toggle Plain Text)
  1. .photos li{display:inline;}

into the CSS file, problem solved.
bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Unordered List (UL) causing me problems in IE

 
0
  #10
Jun 14th, 2008
The problem is in your style.
HTML and CSS Syntax (Toggle Plain Text)
  1. ....{width: 78px;
  2. height: 112px;
  3. 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
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Other Threads in the HTML and CSS Forum


Views: 2631 | Replies: 9
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC