Setting width to 100% doesn't actually render quite at 100%

Forum Moderators: not2easy

Message Too Old, No Replies

Setting width to 100% doesn't actually render quite at 100%

Using a div tag with an image backround

BReflection

12:56 pm on Apr 12, 2004 (gmt 0)

Hey guys!

For my horizontal navigation bar I am using a div tag and applying a background to it, and I would like the background image to stretch all the way across the screen. The problem, however, is that it only stretches to about 97-98% of the screen. Setting it to 102% makes it fit the edge, but if I resize the screen at all, it gets incrementally farther away the smaller I make it! Crazy!

Ok here's the code.
CSS


#linkCascade {
background: url(../images/linkCascade.gif) repeat-x;
position: absolute;
left: 0px;
top: 68px;
width: 100%;}

HTML

<link href="style/style.css" rel="stylesheet" type="text/css">
<body>
<div id="banner"></div>
<div id="linkCascade"><a href="index.php">Home</a><img src="images/separator_white_tall.gif" width="20" height="10"> 
</div>
</body>

Thanks for any pointers!

webdesignerq

1:38 pm on Apr 12, 2004 (gmt 0)

your browserwindow differs ... so you have to make alternative css-files to workaraound it

webdesignerq

1:40 pm on Apr 12, 2004 (gmt 0)

better use<style type="text/css">

</style>

to hide from old and non-css browsers .. important

webdesignerq

1:42 pm on Apr 12, 2004 (gmt 0)

body: set top margin and left margin to zero
can solve problem of maximum width

Birdman

1:48 pm on Apr 12, 2004 (gmt 0)

Sound to me like you need to set the body and html margins to zero.

See this thread:
[webmasterworld.com...]

DrDoc

3:12 pm on Apr 12, 2004 (gmt 0)

better use<style type="text/css">

</style>
to hide from old and non-css browsers .. important

Better not use the HTML style comments if you are using XHTML markup, or expect your page to be viewed by XML based browser rendering engines.

Briank58

9:49 pm on Apr 12, 2004 (gmt 0)

Methinks what you're experiencing is the default browser margins. CSS is positioning your image on the y axis at 0px but when extending to the right you're unable to extend fully?

if so, try this:


#linkCascade { 
background: url(../images/linkCascade.gif) repeat-x; 
position: absolute; 
left: 0px; 
top: 68px; 
right: 0px;
width: 100%;
}

Brian

BReflection

6:22 am on Apr 13, 2004 (gmt 0)

Thanks birdman and briank58 that thread was the fix!

In case anyone else runs across this problem, here's my redefinition of body:


body {
background: F0F1E8 url(../images/headerCascade.gif) repeat-x 0px 0px;
scrollbar-arrow-color: #77796D;
scrollbar-dark-shadow-color: #0000FF;
scrollbar-face-color: #F0F1E8;
scrollbar-highlight-color: #BDBF9B;
scrollbar-shadow-color: 446681;
margin: 0;
padding: 0;}

(This is for my work intranet and we all use I.E 6 so I can get away with CSS 3 :)