Hello,
I have currently been reworking my site's design: out with the tables; in with the CSS. But (believe it or not), IE (5&6) doesn't like the changes.
What I'm trying to do is have the "<div id="banner">" stretch across the entire width of the browser window. This works in OPera, Netscape, and firefox:
#banner
{
background-color: #000;
color: #fff;
padding: 5px;
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 4;
}Try setting your page margins:
body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
BobHi Bob,
Thanks for the suggestion. I gave it a wirl, but no luck.
This is the homepage:
<!-- m --><a class="postlink" href="http://www.blackmarketculture.com">http://www.blackmarketculture.com</a><!-- m -->
This is the homepage with "margin: 0;"
<!-- m --><a class="postlink" href="http://www.blackmarketculture.com/index2.html">http://www.blackmarketculture.com/index2.html</a><!-- m -->
I think by declaring margin: 0 in the body tag somehow throws the page out of wack, it's almost as if it deletes margins set on other divs???
Thanks again,
MikeIt's completely unnecessary to declare it as being width: 100%. Block-level elements automatically assume full width of the space provided them.
I'm not entirely sure what you're trying to do, but I think position:absolute is also unnecessary.Originally posted by mikepurvis
It's completely unnecessary to declare it as being width: 100%. Block-level elements automatically assume full width of the space provided them.
I'm not entirely sure what you're trying to do, but I think position:absolute is also unnecessary.
Mike, I just came back from your site; most interestnig! I left a comment. Love your Jack Frost photo.
Your remarks here should help me. My background image is 20px wide (repeat-y, 40px high); it makes a strip down the left side of my pages. My masthead (banner) is 700px wide. I purposely took up less than 800px across the page, having understood (rightly or wrongly) from somewhere that you shouldn't fill the full width of the - uhh - viewport, if that's what I mean - I think so.
I'm completely re-doing my CSS (but haven't opened my site yet anyway) - since I'm changing from HTML 4.01 Transitional to Strict. This means getting stuff out of the Transitional files; I'm learning, but it will require changes to my external CSS, to make a decent layout. Well, I was going to change the CSS anyway! Didn't like my layout.
So, suppose I leave any reference to width out, say, for my banner. What happens then? In my HTML, do I give height and width? My understanding was, doing so makes a page load faster, but then I read elsewhere that the idea of giving height and width in the HTML code was to *override* actual height and width. Can you say I'm confused? Yes <g>.
So, at the moment, I've specified a left margin of 35px, to keep the banner from overlapping the background image. I didn't feel comfortable making it butt right up against that background strip, though if I could do that, I'd love to! I think it's IE/Win that causes the problem, and I'm (maybe shortsightedly) using Opera (7.54)to do all my initial review and testing. I check with IE 6, Firefox 1.0, and Netscape 7.2 before putting my pages up (but haven't yet acquired older browsers).
So really, I'm not at all sure how to handle width. What puzzles me is the idea of "100% width when there's already a left margin of, say, 20 to 35px. Intuitively, that doesn't make sense to me. What am I not understanding; can you perceive it? (Or anybody else?)
Tue, 01 Feb 2005 20:37:46Originally posted by CarolW
Mike, I just came back from your site; most interestnig! I left a comment. Love your Jack Frost photo.
Thank you. The gallery is operational, but it's currently ugly, so I haven't launched it.
So, suppose I leave any reference to width out, say, for my banner. What happens then? In my HTML, do I give height and width? My understanding was, doing so makes a page load faster, but then I read elsewhere that the idea of giving height and width in the HTML code was to *override* actual height and width. Can you say I'm confused? Yes <g>.
You shouldn't need to specify height or width in the HTML. Basically, for any 'block-level' element, like <h1> or <div>, the default width is 'width: auto'. The reason this is different from 'width: 100%' is that width:auto will shrink if there's padding, borders, or margin tacked onto it, whereas width:100% will add id, resulting in a total width beyond the width of the viewport.
So, at the moment, I've specified a left margin of 35px, to keep the banner from overlapping the background image. I didn't feel comfortable making it butt right up against that background strip, though if I could do that, I'd love to! I think it's IE/Win that causes the problem, and I'm (maybe shortsightedly) using Opera (7.54)to do all my initial review and testing. I check with IE 6, Firefox 1.0, and Netscape 7.2 before putting my pages up (but haven't yet acquired older browsers).
I'm currently rebuilding my layout using a methods that will be more friendly toward IE5x. Since it's at an earlier stage, the css is all in the main file, so it's easier to 'get'. You're welcome to take a look and see how it works (<!-- m --><a class="postlink" href="http://uwmike.com/layout/pastel/cssbanner.html">http://uwmike.com/layout/pastel/cssbanner.html</a><!-- m -->). Particularly important is this bit:
#headerbar {
height: 135px;
background: white url(styles/img/banner-bg.jpg) 0px 43px repeat-x;
position: relative;
min-width: 770px;
}
The position:relative is just to allow me to position other elements absolutely inside of the header, giving it the nifty liquid expansion.
Hope that's helpful.You shouldn't need to specify height or width in the HTML. Basically, for any 'block-level' element, like <h1> or <div>, the default width is 'width: auto'. The reason this is different from 'width: 100%' is that width:auto will shrink if there's padding, borders, or margin tacked onto it, whereas width:100% will add id, resulting in a total width beyond the width of the viewport.
Thanks for posting this, it was very helpful.
This:
#banner{
background-color: #000;
color: #fff;
padding: 5px;
width: auto;
margin: 0 0px 0 0px;
border-bottom: 1px solid #fff;
z-index: 4;
}
Along with Bob's Suggestion:
body {margin: 0;}
Helped me to achieve the effect that I was looking for. Also, gettin rid of "position: absolute" was a great idea.
Thank you all for the help,
Mike
I have currently been reworking my site's design: out with the tables; in with the CSS. But (believe it or not), IE (5&6) doesn't like the changes.
What I'm trying to do is have the "<div id="banner">" stretch across the entire width of the browser window. This works in OPera, Netscape, and firefox:
#banner
{
background-color: #000;
color: #fff;
padding: 5px;
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 4;
}Try setting your page margins:
body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
BobHi Bob,
Thanks for the suggestion. I gave it a wirl, but no luck.
This is the homepage:
<!-- m --><a class="postlink" href="http://www.blackmarketculture.com">http://www.blackmarketculture.com</a><!-- m -->
This is the homepage with "margin: 0;"
<!-- m --><a class="postlink" href="http://www.blackmarketculture.com/index2.html">http://www.blackmarketculture.com/index2.html</a><!-- m -->
I think by declaring margin: 0 in the body tag somehow throws the page out of wack, it's almost as if it deletes margins set on other divs???
Thanks again,
MikeIt's completely unnecessary to declare it as being width: 100%. Block-level elements automatically assume full width of the space provided them.
I'm not entirely sure what you're trying to do, but I think position:absolute is also unnecessary.Originally posted by mikepurvis
It's completely unnecessary to declare it as being width: 100%. Block-level elements automatically assume full width of the space provided them.
I'm not entirely sure what you're trying to do, but I think position:absolute is also unnecessary.
Mike, I just came back from your site; most interestnig! I left a comment. Love your Jack Frost photo.
Your remarks here should help me. My background image is 20px wide (repeat-y, 40px high); it makes a strip down the left side of my pages. My masthead (banner) is 700px wide. I purposely took up less than 800px across the page, having understood (rightly or wrongly) from somewhere that you shouldn't fill the full width of the - uhh - viewport, if that's what I mean - I think so.
I'm completely re-doing my CSS (but haven't opened my site yet anyway) - since I'm changing from HTML 4.01 Transitional to Strict. This means getting stuff out of the Transitional files; I'm learning, but it will require changes to my external CSS, to make a decent layout. Well, I was going to change the CSS anyway! Didn't like my layout.
So, suppose I leave any reference to width out, say, for my banner. What happens then? In my HTML, do I give height and width? My understanding was, doing so makes a page load faster, but then I read elsewhere that the idea of giving height and width in the HTML code was to *override* actual height and width. Can you say I'm confused? Yes <g>.
So, at the moment, I've specified a left margin of 35px, to keep the banner from overlapping the background image. I didn't feel comfortable making it butt right up against that background strip, though if I could do that, I'd love to! I think it's IE/Win that causes the problem, and I'm (maybe shortsightedly) using Opera (7.54)to do all my initial review and testing. I check with IE 6, Firefox 1.0, and Netscape 7.2 before putting my pages up (but haven't yet acquired older browsers).
So really, I'm not at all sure how to handle width. What puzzles me is the idea of "100% width when there's already a left margin of, say, 20 to 35px. Intuitively, that doesn't make sense to me. What am I not understanding; can you perceive it? (Or anybody else?)
Tue, 01 Feb 2005 20:37:46Originally posted by CarolW
Mike, I just came back from your site; most interestnig! I left a comment. Love your Jack Frost photo.
Thank you. The gallery is operational, but it's currently ugly, so I haven't launched it.
So, suppose I leave any reference to width out, say, for my banner. What happens then? In my HTML, do I give height and width? My understanding was, doing so makes a page load faster, but then I read elsewhere that the idea of giving height and width in the HTML code was to *override* actual height and width. Can you say I'm confused? Yes <g>.
You shouldn't need to specify height or width in the HTML. Basically, for any 'block-level' element, like <h1> or <div>, the default width is 'width: auto'. The reason this is different from 'width: 100%' is that width:auto will shrink if there's padding, borders, or margin tacked onto it, whereas width:100% will add id, resulting in a total width beyond the width of the viewport.
So, at the moment, I've specified a left margin of 35px, to keep the banner from overlapping the background image. I didn't feel comfortable making it butt right up against that background strip, though if I could do that, I'd love to! I think it's IE/Win that causes the problem, and I'm (maybe shortsightedly) using Opera (7.54)to do all my initial review and testing. I check with IE 6, Firefox 1.0, and Netscape 7.2 before putting my pages up (but haven't yet acquired older browsers).
I'm currently rebuilding my layout using a methods that will be more friendly toward IE5x. Since it's at an earlier stage, the css is all in the main file, so it's easier to 'get'. You're welcome to take a look and see how it works (<!-- m --><a class="postlink" href="http://uwmike.com/layout/pastel/cssbanner.html">http://uwmike.com/layout/pastel/cssbanner.html</a><!-- m -->). Particularly important is this bit:
#headerbar {
height: 135px;
background: white url(styles/img/banner-bg.jpg) 0px 43px repeat-x;
position: relative;
min-width: 770px;
}
The position:relative is just to allow me to position other elements absolutely inside of the header, giving it the nifty liquid expansion.
Hope that's helpful.You shouldn't need to specify height or width in the HTML. Basically, for any 'block-level' element, like <h1> or <div>, the default width is 'width: auto'. The reason this is different from 'width: 100%' is that width:auto will shrink if there's padding, borders, or margin tacked onto it, whereas width:100% will add id, resulting in a total width beyond the width of the viewport.
Thanks for posting this, it was very helpful.
This:
#banner{
background-color: #000;
color: #fff;
padding: 5px;
width: auto;
margin: 0 0px 0 0px;
border-bottom: 1px solid #fff;
z-index: 4;
}
Along with Bob's Suggestion:
body {margin: 0;}
Helped me to achieve the effect that I was looking for. Also, gettin rid of "position: absolute" was a great idea.
Thank you all for the help,
Mike