7 replies to this topic

[Raven-X]

http://www.anime-cod...clean/index.php

Basically it looks good in FF but in IE the images are repeated all across the screen. I don't understand why this is happening but if you compare it in both browsers it will be become axiomatic where the problem lies.

My objective is simple, I want to use CSS rollovers to link to different pages. IE stretches it across the screen.

Here is my code:

/*menu navigation images, each image is controlled by a class that is coordinated with it's purpose or name.*/

/*first nav*/
a:link.fnav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.fnav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.fnav{
color: #3f3580; 
background-image: url(images/rollovers/window2.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.fnav { 
color: #3f3580; 
background-image: url(images/rollovers/window.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*first nav*/

/*second nav*/
a:link.snav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.snav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.snav{
color: #3f3580; 
background-image: url(images/rollovers/window2.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.snav { 
color: #3f3580; 
background-image: url(images/rollovers/window.jpg); 
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*second nav*/
/*menu navigation images, each image is controlled by a class that is coordinated with it's purpose or name*/

body {background-color: #e8e9ea;}

.headerhdline {
font: 40px Century Gothic; 
letter-spacing: 3px;
color: #24374a;
}

.phptime {
font: 15px arial;
letter-spacing: 1px;
color: #173442;
padding-left: 280px;
}

#container {
width: 845px; height: 500px;
background-color: #e8e9ea;
text-align: center; 
margin: auto;
	margin-left: auto;
		margin-right: auto;
}

#northwestcityclean {
font: 23px arial black;
letter-spacing: 3px;
color: #3a6579;
width: 840px; height: 15px;
padding: 5px 5px 14px 5px; 
background-image: url(images/northwestcitycleantitlebar.gif);
border-top: 2px solid #5e5d5d; 
	border-bottom: 2px solid #5e5d5d; 
		border-right: 2px solid #5e5d5d; 
			border-left: 2px solid #5e5d5d;
overflow: hidden;
}


#header {
padding-top: 115px;
width: 850px; height: 54px;
background-image: url(images/header.png);
border-bottom: 2px solid #5e5d5d; 
	border-right: 2px solid #5e5d5d; 
		border-left: 2px solid #5e5d5d;
}

#logo {
width: 150px; height: 150px;
background-image: url();
z-index: 1;
position: absolute; top: 30px; left: 200px;
}

#imagemenu {
z-index: 2;
width: 843px; height: 90px;
background-color: #d8e9f1;
border-bottom: 2px solid #5e5d5d; 
	border-right: 2px solid #5e5d5d; 
		border-left: 2px solid #5e5d5d;
padding: 40px 0px 0px 7px;
text-align: left;
}

[dEcade]

I had that happen to me once in Firefox but when I went back it fixed itself. Why not try adding a width to the links?

[Ghost]

The template looks the same for me in FF 3 and IE 7.

Make sure you clear the layout at the very end (at the moment, the navigation is floating outside the boundaries of the layout).

[Tyson D]

They are repeating because the default setting for a background image in CSS is to repeat both horizontally and vertically. To fix the repetition, in the places where you add a background image add "no-repeat" in like so:

background-image: url(images/rollovers/window.jpg) no-repeat;

You can also include it like this:

background-repeat: no-repeat;

[Raven-X]

Ok, thanks for the solution. That worked but there still is a serious problem.

First off, in IE the image....have like an invisible length added to them or something. Every images goes across the screen, but it just doesn't stretch.

http://www.anime-cod...clean/index.php
Check it out in IE and then look at it in Firefox to see what I mean.

/*menu navigation images, each image is controlled by a class that is coordinated with it's purpose or name.*/

/*first nav*/
a:link.fnav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
background-repeat: no-repeat;
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.fnav {
color: #03528f; 
background-image: url(images/rollovers/window.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.fnav{
color: #3f3580; 
background-image: url(images/rollovers/window2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.fnav { 
color: #3f3580; 
background-image: url(images/rollovers/window2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*first nav*/

/*second nav*/
a:link.snav {
color: #03528f; 
background-image: url(images/rollovers/windows_cleaning.jpg); 
background-repeat: no-repeat;
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.snav {
color: #03528f; 
background-image: url(images/rollovers/windows_cleaning.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.snav{
color: #3f3580; 
background-image: url(images/rollovers/windows_cleaning2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.snav { 
color: #3f3580; 
background-image: url(images/rollovers/windows_cleaning2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*second nav*/

/*third nav*/
a:link.tnav {
color: #03528f; 
background-image: url(images/rollovers/topleft.jpg); 
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
background-repeat: no-repeat;
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.tnav {
color: #03528f; 
background-image: url(images/rollovers/topleft.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.tnav{
color: #3f3580; 
background-image: url(images/rollovers/topleft2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.tnav { 
color: #3f3580; 
background-image: url(images/rollovers/orange.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*third nav*/

/*fourth nav*/
a:link.fourthnav {
color: #03528f; 
background-image: url(images/rollovers/orange.jpg); 
padding: /*top*/30px /*right*/60px /*bottom*/60px /*left*/30px; 
background-repeat: no-repeat;
display: block; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:visited.fourthnav {
color: #03528f; 
background-image: url(images/rollovers/orange.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}

a:hover.fourthnav{
color: #3f3580; 
background-image: url(images/rollovers/orange2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #405d7b; 
margin-right: 15px;
}

a:active.fourthnav { 
color: #3f3580; 
background-image: url(images/rollovers/orange2.jpg); 
background-repeat: no-repeat;
padding: 30px 60px 60px 25px; 
border: 3px solid #85a0bc; 
margin-right: 15px;
}
/*fourth nav*/

/*menu navigation images, each image is controlled by a class that is coordinated with it's purpose or name*/

body {background-color: #e8e9ea;}

.headerhdline {
font: 40px Century Gothic; 
letter-spacing: 3px;
color: #24374a;
}

.phptime {
font: 15px arial;
letter-spacing: 1px;
color: #173442;
padding-left: 280px;
}

#container {
width: 845px; height: 500px;
background-color: #e8e9ea;
text-align: center; 
margin: auto;
	margin-left: auto;
		margin-right: auto;
}

#northwestcityclean {
font: 23px arial black;
letter-spacing: 3px;
color: #3a6579;
width: 840px; height: 15px;
padding: 5px 5px 14px 5px; 
background-image: url(images/northwestcitycleantitlebar.gif);
border-top: 2px solid #5e5d5d; 
	border-bottom: 2px solid #5e5d5d; 
		border-right: 2px solid #5e5d5d; 
			border-left: 2px solid #5e5d5d;
overflow: hidden;
}


#header {
padding-top: 115px;
width: 850px; height: 54px;
background-image: url(images/header.png);
border-bottom: 2px solid #5e5d5d; 
	border-right: 2px solid #5e5d5d; 
		border-left: 2px solid #5e5d5d;
}

#logo {
width: 150px; height: 150px;
background-image: url();
z-index: 1;
position: absolute; top: 30px; left: 200px;
}

#imagemenu {
z-index: 2;
width: 843px; height: 90px;
background-color: #d8e9f1;
border-bottom: 2px solid #5e5d5d; 
	border-right: 2px solid #5e5d5d; 
		border-left: 2px solid #5e5d5d;
padding: 40px 0px 0px 7px;
letter-spacing: 5px;
}

[Tyson D]

Hey,

This makes sense though, the reason they are all spanning the screen is because you've set all your these image links to display as block elements rather than their default which is inline.

If you want to have the images display on the same line here (in a clean way) then you should remove the display: block; for all your style declarations for links.

Block elements: Span the entire width of their container and they will clear. (eg divs, headings, paragraphs, lists, etc)

Inline elements: Take up as much space as they need and will allow multiple elements on the same line without needing to float. (eg spans, links, imgs, form inputs, etc)

These defaults can be changed through CSS (options are none, inline and block) and that's exactly what you did.

Once you fix this you'll probably also notice that your padding for your links has 30px on the right side, but then 25px on the the right side when hovering over it. You'll probably want to make these numbers line up to remove a little gap that will probably appear.

Hope this helps!

Edit: Though this may be a solution in FF, you may have to try a different approach for IE compatibility.

Instead of the above, you can just add float: left; to each of the a:link.firstnav, a:link.secondnav, ... You'll still have to adjust the padding a bit though I'd imagine. You may also have to adjust the width of your menu div center that div if you want all your menu to be centered. This shouldn't be too tricky!

Edited by TysonD, 28 July 2008 - 09:02 AM.

[Raven-X]

Wow, much ! Thank you.

Now I just have to find some method to wield dual stylesheets, because IE just won't do things right for me, lol.

[Tyson D]

Glad I could help. You can use conditional comments to load different style sheets based on browser. If you google "conditional comments" you should find what you're looking for, otherwise you can post here if you want the scoop on CCs!