1. Home
  2. Forums Index
  3. Browser Side / CSS 10:54 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Cross-Browser Headache

I'm stumped …

         

katana_one

8:52 pm on Jul 6, 2004 (gmt 0)

10+ Year Member



I'm working on a site and most of it looks great in all browsers I've tested. But now I've hit this one snag, and the wierd thing is that I can get it to look exactly how I want in IE, but not in NS or Opera.

Here is the relevant CSS (from external file):
*****************************************************
body{ margin: 0px; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; color: #000000; font-size: .8em }

h1, h4{ color: #003399 }

#content{ position: absolute; top: 25px; left: 55px; width: 55%; padding: 10px }
#content p{ text-align: justify }
#content h4{ margin-bottom: -1em }

.gallery{ position: relative; top: 1em }
.gallery img{ border: 0 }
.gallery a{ border: 2px solid #CCCCCC; width: 74px; height: 74px; margin: 6px 6px 0 0 }
.gallery a:hover{ border: 2px solid #003399 }
*****************************************************

and the HTML file:

*****************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Sample Page</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="master1.css">
</HEAD>
<BODY>

<div id="content">
<h1>Page Title Goes Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h4>Subheading Goes Here</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<h4>Gallery One</h4>
<span class="gallery">
<a href="#"><IMG height="72" src="images/thumb1a.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1b.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1c.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1d.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1e.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1f.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb1g.gif" width="72" alt="Thumbnail"></a>
</span>

<h4>Gallery Two</h4>
<span class="gallery">
<a href="#"><IMG height="72" src="images/thumb2a.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2b.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2c.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2d.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2e.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2f.gif" width="72" alt="Thumbnail"></a>
<a href="#"><IMG height="72" src="images/thumb2g.gif" width="72" alt="Thumbnail"></a>
</span>

</BODY>
</HTML>
*****************************************************

The area giving me trouble is the thumbnail image links. I want the image/links to have a 2 pixel border all the way around, but Netscape and Opera display differently than IE. Any ideas?

vkaryl

11:39 pm on Jul 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I actually am pretty new to css myself. I can't help much with your present problem.

I CAN tell you that it's not unusual for IE to display some things "properly" (that is, the way YOU expect them to display) while other browsers appear to "break".

It's honestly IE that's broken. Design for either Opera or Gecko (Moz, FireFox, NN7+), THEN make adjustments/hacks/fixes so IE looks right too.

I wonder if the problem might lie in your spec for gallery img with border 0, but then a gallery img a, hover,etc with specified borders. I'd have to really play with it (because as I said I'm pretty new to this myself) and I don't have time to do that in depth until the weekend.

Maybe SuzyUK will have the answer.

D_Blackwell

12:48 am on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I haven't figured it out yet, but it's busted in Firefox too, so the problem is probably in the code and not in IE. vkaryl is on the right track.

DrDoc

2:15 am on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The problem is IE, and the broken box model.

1) Use a full and valid doctype [w3.org]
2) Red up on the box model problem msg 37 & 38 [webmasterworld.com]

;)

vkaryl

2:32 am on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



DrDoc: the broken IE "box model" screws the borders around the thumbnails?

D_Blackwell

2:35 am on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have it working in Firefox and Opera, but not IE, so it could be correct.

a{ border: 2px solid #CCCCCC; width: 74px; height: 74px; margin: 6px 6px 0 0 }

<a> is an inline element, so there's no use in declaring dimensions.

/*.gallery img{border: 0;}*/ The border is "none" by default. The borders that you are declaring with <a> will override the usual linked image result.

This won't work in IE without calling IE behaviors in an .htc file, but passes Firefox, Opera. I have it working in IE with the .htc
.gallery img { border: 2px solid red; margin: 6px 6px 0 0; }
.gallery img:hover { border: 2px solid blue; }

(I changed the border colors so I could see them better:)

katana_one

12:45 pm on Jul 7, 2004 (gmt 0)

10+ Year Member



Thanks for the input, guys.
After fiddling with it a bit more this morning I have it working in IE and Opera, but still no luck in Netscape. It required a couple of hacks, but that's par for the course in cross-browser CSS land.

Here is the new CSS file:
*****************************************************
body{ margin: 0px; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; color: #000000; font-size: .8em }

h1, h4{ color: #003399 }

#content{ position: absolute; top: 25px; left: 55px; width: 55%; padding: 10px }
#content p{ text-align: justify }
#content h4{ margin-bottom: -1em }

.gallery{ position: relative; top: 1em }
html>body .gallery img{ border: 2px solid #CCCCCC; margin: 6px 6px 0 0; height: auto; width: auto }
html>body .gallery img:hover{ border: 2px solid #003399 }
*html .gallery a{ border: 2px solid #CCCCCC }
*html .gallery a:hover{ border: 2px solid #003399 }
*html .gallery img{ border: 0; margin: 12px 6px 0 0 }
***************************************************
The problem now is that Netscape (and therefore, all Gecko browsers I assume) crops the images. I'll be fiddling with this some more later today, and will check back here to see if anyone has any more suggestions.

SuzyUK

4:25 pm on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi the problem is that the <a> elements are inline and as D_Blackwell says there is no use in declaring dimensions.

Also this means they will not then stretch to fit the images inside them. (IE is stretching/overflowing them incorrectly) The borders are on the <a> elements and they are showing you in Moz/Opera where the <a> elements actually are.

What I presume you want to do is make the <a> element hug the <img> element. This can be done a few ways, one would be to start using display: block and floating the images, however I think the easier way here would be to amend your gallery CSS to this:


.gallery{ position: relative; top: 1em }
.gallery a img {border: 2px solid #ccc; margin: 6px 6px 0 0 }
.gallery a:hover {background: #fff;} *
.gallery a:hover img {border: 2px solid #039;}

Note *: the a:hover rule is required to workaround an IE bug which means you can't target the image inside a hover rule without first making a hover rule.. lol, so I just put a background color in it as it shouldn't affect the overall effect..

What this is doing is putting the border on the image itself instead of the <a>nchor element, the borders are then being changed by the a:hover img selector

Also as an aside it doesn't affect anything here but you might like to amend <span class="gallery"> to <div class="gallery"> , span is an inline element and ususally <div>isions of pages are more naturally placed in a block element which is the <div>

Suzy

katana_one

5:52 pm on Jul 7, 2004 (gmt 0)

10+ Year Member



Thanks, Suzy, I like your suggestion as it uses no hacks, unlike my solution. However, the images are still cropped in Netscape.

Also, I noticed that Opera was resizing the images by a pixel or two - I had to add height and width parameters set to 'auto' to fix it, like so:

.gallery a img {border: 2px solid #ccc; margin: 6px 6px 0 0; width: auto; height: auto }

EDIT

I spoke too soon! I went back and tried changing all of the spans to divs and it finally displays right in Netscape. I'm not sure why Netscape would display spans and divs with the same rules differently, but it seems it does make a difference in this instance.

SuzyUK

8:10 pm on Jul 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



...I'm not sure why Netscape would display spans and divs with the same rules differently,...

Ahh but they haven't got the same rules ;)

A <div> is a block level element and has the default rule of display: block; and a <span> is an inline element and has the default of display: inline;.

While this may not seem to be important visually in this case, trust me when it comes to containing elements higher than the default inline (anonymous line box) line-height.. it is :)

Which is maybe why Moz (NN) was cropping the images, Moz is ususally right when it comes to CSS :)

What's happening with Opera now? is it still adding pixels? I'm sorry, I've had a slight technical hitch and haven't yet re-installed Opera..

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:54 pm May 1, 2026