•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 425,820 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,010 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1050 | Replies: 9 | Solved
 |
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
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
<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. :-)
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 261
Reputation:
Rep Power: 0
Solved Threads: 30
Posting Whiz in Training
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,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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.
<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.
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 261
Reputation:
Rep Power: 0
Solved Threads: 30
Posting Whiz in Training
I didn't get in your reply wht r u asking second one
Thanx,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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.
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 261
Reputation:
Rep Power: 0
Solved Threads: 30
Posting Whiz in Training
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,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Jun 2008
Posts: 29
Reputation:
Rep Power: 1
Solved Threads: 2
Light Poster
•
•
•
•
Originally Posted by punkrockbboy 
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?
•
•
Join Date: Jun 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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.
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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.
.photos li{display:inline;}into the CSS file, problem solved.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
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.
....{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 8:07 pm.
Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Other Threads in the HTML and CSS Forum
- Previous Thread: Image position in Firefox vs Safari?
- Next Thread: I'm New.
