1. Home
  2. Forums Index
  3. Browser Side / CSS 3:19 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS issue with IE

Brand new to CSS looking for help

         

tablerock

12:30 am on Apr 14, 2008 (gmt 0)

10+ Year Member



Hi. Brand new to CSS. Finished a site that displays perfectly in Firefox, Safari, and Opera, but terribly in IE. Unfortunately I'm not really educated enough to explain the problem from a technical sense. Basically it's a photo web site and the issues are:
1.) thumbnails and actual image (as you roll over the thumbnail) don't display properly
2.) Header is completely missing
3.) Footer is at the top of the page.

Problems are only with IE. Any help would be greatly appreciated. Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>photographie</title>
<meta name="Author" content="author's name" />

<style type="text/css">
body {text-align:center; font-family: Euphemia UCAS; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}

#container {position:relative; width:1004px; height:748px; margin:10px auto 0 auto; background:#fff url(../images/back.jpg) 800px 600px no-repeat; border:1px solid #aaa;}

#container ul {width:180px; height:600px; padding:0; top:84px; margin:0px; margin-top:84px; list-style-type:none; float:right;}

#container li {float:left;}

#container header {padding:0; top:20px; margin:25px; margin-top:20px; list-style-type:none; font-size:250%;float:left;}
#container footer {padding:0; top:20px; margin:5px; margin-top:720px; list-style-type:none; float:left;}

#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1.3666px 1.3666px 1.3666px 1.3666px; text-align:left; cursor:default;}
#container a.slidea {background:url(../images/p1_t.jpg); height:50px; width:50px;}
#container a.slideb {background:url(../images/p2_t.jpg); height:50px; width:50px;}
#container a.slidec {background:url(../images/p3_t.jpg); height:50px; width:50px;}
#container a.slided {background:url(../images/p4_t.jpg); height:50px; width:50px;}
#container a.slidee {background:url(../images/p5_t.jpg); height:50px; width:50px;}
#container a.slidef {background:url(../images/p6_t.jpg); height:50px; width:50px;}
#container a.slideg {background:url(../images/p7_t.jpg); height:50px; width:50px;}
#container a.slideh {background:url(../images/p8_t.jpg); height:50px; width:50px;}
#container a.slidei {background:url(../images/p9_t.jpg); height:50px; width:50px;}
#container a.slidej {background:url(../images/p10_t.jpg); height:50px; width:50px;}
#container a.slidek {background:url(../images/p11_t.jpg); height:50px; width:50px;}
#container a.slidel {background:url(../images/p12_t.jpg); height:50px; width:50px;}
#container a.slidem {background:url(../images/p13_t.jpg); height:50px; width:50px;}
#container a.sliden {background:url(../images/p14_t.jpg); height:50px; width:50px;}
#container a.slideo {background:url(../images/p15_t.jpg); height:50px; width:50px;}
#container a.slidep {background:url(../images/p16_t.jpg); height:50px; width:50px;}
#container a.slideq {background:url(../images/p17_t.jpg); height:50px; width:50px;}
#container a.slider {background:url(../images/p18_t.jpg); height:50px; width:50px;}
#container a.slides {background:url(../images/p19_t.jpg); height:50px; width:50px;}
#container a.slidet {background:url(../images/p20_t.jpg); height:50px; width:50px;}
#container a.slideu {background:url(../images/p21_t.jpg); height:50px; width:50px;}
#container a.slidev {background:url(../images/p22_t.jpg); height:50px; width:50px;}
#container a.slidew {background:url(../images/p23_t.jpg); height:50px; width:50px;}
#container a.slidex {background:url(../images/p24_t.jpg); height:50px; width:50px;}

#container a.gallery span {position:absolute; width:.1px; height:.1px; top:84px; left:5px; background:#fff; overflow:hidden;}
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
#container a.gallery:hover span {position:absolute; width:800px; height:600px; top:84px; left:10px; color:#000; background:#fff;}
</style>
</head>

<body>

<div id="container">
<header>

my name is here
</header>

<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="../images/p1.jpg" /></span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="../images/p2.jpg" /></span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="../images/p3.jpg" /></span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="../images/p4.jpg" /></span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="../images/p5.jpg" /></span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="../images/p6.jpg" /></span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="../images/p7.jpg" /></span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="../images/p8.jpg" /></span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="../images/p9.jpg" /></span></a></li>
<li><a class="gallery slidej" href="#nogo"><span><img src="../images/p10.jpg" /></span></a></li>

<li><a class="gallery slidek" href="#nogo"><span><img src="../images/p11.jpg" /></span></a></li>
<li><a class="gallery slidel" href="#nogo"><span><img src="../images/p12.jpg" /></span></a></li>
<li><a class="gallery slidem" href="#nogo"><span><img src="../images/p13.jpg" /></span></a></li>
<li><a class="gallery sliden" href="#nogo"><span><img src="../images/p14.jpg" /></span></a></li>
<li><a class="gallery slideo" href="#nogo"><span><img src="../images/p15.jpg" /></span></a></li>
<li><a class="gallery slidep" href="#nogo"><span><img src="../images/p16.jpg" /></span></a></li>
<li><a class="gallery slideq" href="#nogo"><span><img src="../images/p17.jpg" /></span></a></li>
<li><a class="gallery slider" href="#nogo"><span><img src="../images/p18.jpg" /></span></a></li>
<li><a class="gallery slides" href="#nogo"><span><img src="../images/p19.jpg" /></span></a></li>
<li><a class="gallery slidet" href="#nogo"><span><img src="../images/p20.jpg" /></span></a></li>
<li><a class="gallery slideu" href="#nogo"><span><img src="../images/p21.jpg" /></span></a></li>
<li><a class="gallery slidev" href="#nogo"><span><img src="../images/p22.jpg" /></span></a></li>
<li><a class="gallery slidew" href="#nogo"><span><img src="../images/p23.jpg" /></span></a></li>
<li><a class="gallery slidex" href="#nogo"><span><img src="../images/p24.jpg" /></span></a></li>

</ul>

<footer>
<a href="mailto:inquiries@blahblahblah.com">inquiries</a> ¦ city, state
</footer>

</div>

</body>
</html>

D_Blackwell

2:45 am on Apr 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



#2 & #3
#container header {etc.
#container footer {etc.

<header>
my name is here
</header>

<footer>
<a href="mailto:inquiries@blahblahblah.com">inquiries</a> ¦ city, state
</footer>

You can't just announce the header and footer without proper context and reference in both the CSS and the XHTML. This shouldn't have worked at all. I'm disappointed that it worked in Firefox, though it did not work in the Opera version that I checked with.

In the CSS make these edits:
#container #header {etc.
#container #footer {etc.

In the XHTML make these edits:
<div id="header">
my name is here
</div>

<div id="footer">
<a href="mailto:inquiries@blahblahblah.com">inquiries</a> ¦ city, state
</div>

That should handle items #2 and #3.

This appears to be set up for a very wide display. Horizontal scroll at 1024 x 768 to get a full view of the thumbnail section. (But consistently rendered in Firefox, Opera, and IE.) I assume that this is to allow display of the full size images, but you are really wide here. Are your users going to be okay with that?

Note: Try adding this edit to your CSS
#container a {
height: 50px; width: 50px;
}

Then you can drop that repeated portion of the declaration throughout.

Note: I would typically declare:
html, body {
font-size: 100%;}
...as a base, and then work from there. Do you have a specific reason for selecting 76%?

Note: For #header, I would be inclined toward putting an <h1> in there and declaring my font-size: relative to the suggested base of 100%, maybe 2em. You've given that 250%. If the stylesheet gets more complex it could become very cumbersome working from that base 76% if there is not a good reason for it.

Note: You have declared {list-style-type: none;} here:


#container header {padding:0; top:20px; margin:25px; margin-top:20px; list-style-type:none; font-size:250%;float:left;}
#container footer {padding:0; top:20px; margin:5px; margin-top:720px; list-style-type:none; float:left;

...which works (though I don't know if it 'should'), but may be looking for trouble down the road.

Perhaps dropping those and adding the simpler and more easily managed:

#container ul li {
list-style-type: none;
}

margin:1.3666px 1.3666px 1.3666px 1.3666px;

Surely you jest:)) Specifying to 1/10,000th of pixel:)) 1px or 2px

This can also be shorthanded:
{margin: 2px;}

No time to deal with issue #1 right now. Perhaps I will look at it again tomorrow if still unresolved.

D_Blackwell

3:09 am on Apr 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



BTW - This can probably be cleaned up a bit:

#container ul {width:180px; height:600px; padding:0; top:84px; margin:0px; margin-top:84px; list-style-type:none; float:right;}

You've declared margin; twice. Just go with {margin: 84px 0 0 0;}

You can probably safely drop the {top: 84px;} and never miss it.

Crikey. I found {list-style-type: none;} declared for a third time. This is why it actually worked. Still like my way better:))

D_Blackwell

3:55 am on Apr 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Time freed up quicker than I thought. Easy money.

Problem #1:

Try:


#container a.gallery span {
position: absolute; width: 1px; height: 1px; top: 84px; left: 5px; background: #fff; /*overflow:hidden*/; display: none;
}
#container a.gallery:hover {
border:1px solid #fff;
}
#container a.gallery:hover img {
border: 1px solid #fff; float: left; margin-right: 5px; width: 800px; height: 600px;
}
/*
#container a.slideb:hover img, #container a.slidei:hover img {
float:right;
}
*/
#container a.gallery:hover span {
position: absolute; width: 800px; height: 600px; top: 84px; left: 10px; color: #000; background: #fff; display: block;
}

A quick hack. Try dropping the overflow: and turning display: off and on.

I hacked in some big images. To control display, you will note that I had to hack in height: and width: slightly differently than your option (though I left it in place).

What's up with that stuff in the middle that I commented out? Didn't bother me none not having it.

This is not a complete fix, just a suggested direction of thought. It is really glitchy in IE; hovers work - and then they don't. This day is over.

tablerock

6:26 am on Apr 14, 2008 (gmt 0)

10+ Year Member


You don't like the 76% and 1.3666px:) I came up with those just messing around as they made the font look good and spaced the display 50x50 images so they lined up with the 600px height of the full size image.

I made a bunch of the changes you recommended and things are looking a lot better. I couldn't get the 100% font size, h1, and a couple other things to work they way I wanted them. Things still look good on Firefox, Safari and on Opera. On IE:
1.) The footer just won't leave the top of the page.
2.) I still can't get the full size images to display by rolling over the 50x50 preview images (I couldn't see the preview images before so that's a big improvement). Here's where my code is now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>photographie</title>
<meta name="Author" content="author" />

<style type="text/css">
body {text-align:center; font-family: Euphemia UCAS; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}

#container {position:relative; width:1004px; height:748px; margin:10px auto 0 auto; background:#fff url(../images/back.jpg) 800px 600px no-repeat; border:1px solid #aaa;}

#container ul {width:180px; height:600px; padding:0; margin:84px 0 0 0; list-style-type:none; float:right;}

#container li {float:left;}

#header {padding:0; top:20px; margin:25px; margin-top:20px; list-style-type:none; font-size:250%;float:left;}
#footer {padding:0; top:20px; margin:5px; margin-top:720px; list-style-type:none; float:left;}

#container a.gallery, #container a.gallery:visited {display:block; color:#000; height:50px; width:50px; text-decoration:none; border:1px solid #000; margin:1.4px; text-align:left; cursor:default;}
#container a.slidea {background:url(../images/p1_t.jpg);}
#container a.slideb {background:url(../images/p2_t.jpg);}
#container a.slidec {background:url(../images/p3_t.jpg);}
#container a.slided {background:url(../images/p4_t.jpg);}
#container a.slidee {background:url(../images/p5_t.jpg);}
#container a.slidef {background:url(../images/p6_t.jpg);}
#container a.slideg {background:url(../images/p7_t.jpg);}
#container a.slideh {background:url(../images/p8_t.jpg);}
#container a.slidei {background:url(../images/p9_t.jpg);}
#container a.slidej {background:url(../images/p10_t.jpg);}
#container a.slidek {background:url(../images/p11_t.jpg);}
#container a.slidel {background:url(../images/p12_t.jpg);}
#container a.slidem {background:url(../images/p13_t.jpg);}
#container a.sliden {background:url(../images/p14_t.jpg);}
#container a.slideo {background:url(../images/p15_t.jpg);}
#container a.slidep {background:url(../images/p16_t.jpg);}
#container a.slideq {background:url(../images/p17_t.jpg);}
#container a.slider {background:url(../images/p18_t.jpg);}
#container a.slides {background:url(../images/p19_t.jpg);}
#container a.slidet {background:url(../images/p20_t.jpg);}
#container a.slideu {background:url(../images/p21_t.jpg);}
#container a.slidev {background:url(../images/p22_t.jpg);}
#container a.slidew {background:url(../images/p23_t.jpg);}
#container a.slidex {background:url(../images/p24_t.jpg);}

#container a.gallery span {position: absolute; width: 1px; height: 1px; top: 84px; left: 5px; background: #fff; /*overflow:hidden*/; display: none;}
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover img {border: 1px solid #fff; float: left; margin-right: 5px; width: 800px; height: 600px;}/*
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}*/
#container a.gallery:hover span {position: absolute; width: 800px; height: 600px; top: 84px; left: 10px; color: #000; background: #fff; display: block;}
</style>
</head>

<body>

<div id="container">
<div id="header">
my name is here
</div>

<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="../images/p1.jpg" /></span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="../images/p2.jpg" /></span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="../images/p3.jpg" /></span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="../images/p4.jpg" /></span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="../images/p5.jpg" /></span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="../images/p6.jpg" /></span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="../images/p7.jpg" /></span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="../images/p8.jpg" /></span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="../images/p9.jpg" /></span></a></li>
<li><a class="gallery slidej" href="#nogo"><span><img src="../images/p10.jpg" /></span></a></li>
<li><a class="gallery slidek" href="#nogo"><span><img src="../images/p11.jpg" /></span></a></li>
<li><a class="gallery slidel" href="#nogo"><span><img src="../images/p12.jpg" /></span></a></li>
<li><a class="gallery slidem" href="#nogo"><span><img src="../images/p13.jpg" /></span></a></li>
<li><a class="gallery sliden" href="#nogo"><span><img src="../images/p14.jpg" /></span></a></li>
<li><a class="gallery slideo" href="#nogo"><span><img src="../images/p15.jpg" /></span></a></li>
<li><a class="gallery slidep" href="#nogo"><span><img src="../images/p16.jpg" /></span></a></li>
<li><a class="gallery slideq" href="#nogo"><span><img src="../images/p17.jpg" /></span></a></li>
<li><a class="gallery slider" href="#nogo"><span><img src="../images/p18.jpg" /></span></a></li>
<li><a class="gallery slides" href="#nogo"><span><img src="../images/p19.jpg" /></span></a></li>
<li><a class="gallery slidet" href="#nogo"><span><img src="../images/p20.jpg" /></span></a></li>
<li><a class="gallery slideu" href="#nogo"><span><img src="../images/p21.jpg" /></span></a></li>
<li><a class="gallery slidev" href="#nogo"><span><img src="../images/p22.jpg" /></span></a></li>
<li><a class="gallery slidew" href="#nogo"><span><img src="../images/p23.jpg" /></span></a></li>
<li><a class="gallery slidex" href="#nogo"><span><img src="../images/p24.jpg" /></span></a></li>

</ul>

<div id="footer">
<a href="mailto:inquiries@blahblahblah.com">inquiries</a> ¦ city, state
</div>

</div>

</body>
</html>

D_Blackwell

3:39 pm on Apr 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try this. I've made a few minor changes. Stripped out a lot of extra stuff mostly., Then a couple of browser tweaks. 'Downgraded the DOCTYPE a notch. You can change it back if need be, or knock it down again to plain old HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>photographie</title>
<style type="text/css" media="all">
html, body {
font-size: 100%; margin: 0; padding: 0;
}
body {
font-family: Arial, sans-serif;
}
#container {
position: relative; width: 1000px; height: 750px; margin: 1em; border: .2em solid #000;
}
#container #header {
margin: .8em 0 0 1.5em; font-size: 2em; text-align: left;
}
#container #footer {
position: absolute; bottom: 1em; left: 3em;
}
#container ul {
float: right; width: 180px; margin-top: 84px;
}
#container ul li {
float: left; list-style-type: none;
}
#container a {
height: 50px; width: 50px;
}
#container a.slidea {background:url(xx.jpg); }
#container a.slideb {background:url(xx.jpg); }
#container a.slidec {background:url(xx.jpg); }
#container a.slided {background:url(xx.jpg); }
#container a.slidee {background:url(xx.jpg); }
#container a.slidef {background:url(xx.jpg); }
#container a.slideg {background:url(xx.jpg); }
#container a.slideh {background:url(xx.jpg); }
#container a.slidei {background:url(xx.jpg); }
#container a.slidej {background:url(xx.jpg); }
#container a.slidek {background:url(xx.jpg); }
#container a.slidel {background:url(xx.jpg); }
#container a.slidem {background:url(xx.jpg); }
#container a.sliden {background:url(xx.jpg); }
#container a.slideo {background:url(xx.jpg); }
#container a.slidep {background:url(xx.jpg); }
#container a.slideq {background:url(xx.jpg); }
#container a.slider {background:url(xx.jpg); }
#container a.slides {background:url(xx.jpg); }
#container a.slidet {background:url(xx.jpg); }
#container a.slideu {background:url(xx.jpg); }
#container a.slidev {background:url(xx.jpg); }
#container a.slidew {background:url(xx.jpg); }
#container a.slidex {background:url(xx.jpg); }
#container a.gallery {
display: block; border: 2px solid #000; margin: 2px; cursor: crosshair; outline: none;
}
#container a.gallery:visited {
border: 2px solid #000;
}
#container a.gallery:hover {
border: 2px solid #fff;
}
#container a.gallery:active {
border: 2px solid #000;
}
#container a.gallery span {
display: none;
}
#container a.gallery:hover span {
display: block; position: absolute; top: 6em; left: .5em;
}
#container a.gallery:hover img {
width: 800px; height: 600px; border: .2em solid #000;
}
</style>
</head>
<body>
<div>
<a name="nogo">
</a>
</div>
<div id="container">
<div id="header">
my name is here
</div>
<div>
<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="bbb.jpg" /></span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="ccc.jpg" /></span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="ddd.jpg" /></span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="eee.jpg" /></span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="fff.jpg" /></span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="ggg.jpg" /></span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="hhh.jpg" /></span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="iii.jpg" /></span></a></li>
<li><a class="gallery slidej" href="#nogo"><span><img src="jjj.jpg" /></span></a></li>
<li><a class="gallery slidek" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidel" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidem" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery sliden" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slideo" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidep" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slideq" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slider" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slides" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidet" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slideu" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidev" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidew" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
<li><a class="gallery slidex" href="#nogo"><span><img src="aaa.jpg" /></span></a></li>
</ul>
</div>
<div id="footer">
<a href="mailto:inquiries@blahblahblah.com">inquiries</a> ¦ city, state
</div>
</div>
</body>
</html>

tablerock

6:49 pm on Apr 14, 2008 (gmt 0)

10+ Year Member



Looks like we've got browser consistency, which is awesome, but when I roll over the 50x50 previews in IE nothing appears for the full size 800x600. I think that's all that's left and we'll have this thing whipped.

SuzyUK

8:29 pm on Apr 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld! tablerock..

the (v.nice!) sample that D_Blackwell just left works fine in IE6 as far as I can see, so can I just ask, are you implementing the example with your own styling?

specifically have you actually got a 

#container a.gallery:hover {property: value;}
rule?

there is an IE bug with the "css popups" technique which means you need to change more than the color and/or there is also a bug which means you need a:hover rule in the first place ..

[edited by: SuzyUK at 8:31 pm (utc) on April 14, 2008]

tablerock

9:44 pm on Apr 14, 2008 (gmt 0)

10+ Year Member



Thanks. I'm really fortunate and happy that WebmasterWorld is available. The help from D_Blackwell has been great!

I literally copy and pasted the code changing only the jpg names to match my file names. On a mac I'm running IE 5.2 I don't see the full size 800x600 images when I roll over the 50x50s. On a PC the rollovers seem to work for a couple seconds as the page loads and then everything freezes.

g1smd

12:01 am on Apr 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Mac IE has quite a few issues, and it might be time to not cater for those now. I would have thought that Safari usage far outstrips IE on Mac.

By the way, don't forget to put your stylesheet out into an external CSS file, and to add a meta description to your HTML page.

tablerock

2:54 am on Apr 15, 2008 (gmt 0)

10+ Year Member



When I downloaded IE for my Mac a few days ago it definitely felt weird. Don't have a PC so I check on IE/Mac and then call a friend with a lot more webmaster experience who has IE/PC and ask, "How does it look now? or head to a friends house to check. Definitely feels stone age. My line of thinking was when it looked good on IE/Mac it should look good on IE/PC, but that's probably a flawed way to rationalize.

g1smd

10:06 am on Apr 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Design for Mozilla/Opera/Safari and then tweak for IE seems to usually be the best route.

SuzyUK

12:03 pm on Apr 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE/Mac was quite a different beast from IE/Win and has been said IE/Mac is not really considered any more.

it was in some ways better than IE/Win but not where this technique is concerned - as far as this CSS "Popups" technique goes IE/Mac needs to use the visibility property instead of the display property and that neede to be in a hack as IE/Win didn't like that ;) anyhow it is not really worth you fixing just for IE/Mac, IMHO.

If you only downloaded IE hoping to "see" the windows IE errors in your Mac, then I'm sorry it's not really the best plan, IE/Mac needed it's own version of code at times and there is whole sites dedicated to MAC/IE problems.

anyhow if you've only got a Mac available then yes use safari/firefox and then when you find out you've an IE error, via a friend or a browsershot, a fix will exist ;)

-Suzy

tablerock

10:29 pm on Apr 15, 2008 (gmt 0)

10+ Year Member



Thanks everyone for all the great advice. I confirmed this morning that D_Blackwell's code is perfect on all browsers. Thanks D_Blackwell! I'm all set now. I really appreciate everyone's help/advice and hope I can give back to the community sometime in the future. Cheers!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:19 am May 2, 2026