2 replies [Last post]
alexmo
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2007-09-08
Posts: 2
Points: 0

Hello All,

Hope someone can help me with this issue. This site (simplified version) http://www.comspirit.net/test/index.html displays the way I want in Firefox, but if you look at it in IE, you will notice the gap between the header background image and the navbar. Basically, I am trying to present the title (Testsite) twice, in red and in black superimposed to give the appearance of a text shadow. To accomplish that I am using relative positioning. I cannot use absolute positioning because the page is centered and would cause issues with various screen resolutions. In case you are wondering why I am not using spans instead of divs for the Testsite title, it is because that field is actually dynamically generated via asp/SQLserver (although not in this simplified version). The inclusion of the div "shadow" in the html with its relative position causes the banner to stretch height-wise, even if I try to force the height of the tableheader div. Hope all this makes sense.

Here is the relevant css:

#top {font-family: Comic Sans MS, Times New Roman, Times, serif; font-size: 40px; font-weight: bold; color: #CC3333; left: 30px;top: 23px;position: relative;z-index: 2;} #shadow {font-family: Comic Sans MS, Times New Roman, Times, serif; font-size: 40px; font-weight: bold; color: #000000; left: 32px;top: -29px;position: relative;z-index: 1;} #navbar { height: 20px; background-image: url(nav.gif);}

body {
margin-top: 0px;
text-align: center;
background-image: url(bkpattern_outer.gif);

}

#topbanner {
height: 85px;
background-image: url(banner.jpg);
background-repeat: no-repeat
}

#container {
margin: 0 auto;
width: 758px;
text-align: left;
}

#tableheader {
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000066;
border-right-color: #000066;
border-bottom-color: #000066;
border-left-color: #000066;
background-color: #99ccff;
}

#nav_w {top: 0px; position: relative; left: 55px;}
#nav_n {top: 0px; position: relative; left: 110px;}
#nav_c {top: 0px; position: relative; left: 155px;}
#nav_p {top: 0px; position: relative; left: 200px;}
#nav_s {top: 0px; position: relative; left: 245px;}
#nav_m {top: 0px; position: relative; left: 290px;}

a#nav {
font-family: Cooper Black;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;

}

a#nav:hover {
font-family: Cooper Black;
font-size: 14px;
color: #FF6666;
text-decoration: none;
border: 0px none;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 26 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make #topbanner position:

Make #topbanner position: relative and then make #top and #shadow position: absolute (you'll need to adjust your top values). And please use shorthand CSS, so instead of this:

border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000066; border-right-color: #000066; border-bottom-color: #000066; border-left-color: #000066;

use this:

border: 1px solid #006; border-with: 0 1px 1px

Two lines instead of 12 - much nicer, isn't it?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

alexmo
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2007-09-08
Posts: 2
Points: 0

Thank you very much - that

Thank you very much - that works perfectly!