Hey everyone. I'm doing something wrong because there's no way this shouldn't be centering. The desired result is absolutely everything centering, but in firefox apparently I'm not using 'margin: 0 auto' in the container properly. Can anyone spot the error? This code validates like a sweety but sadly doesn't work, haha.
<!-- w --><a class="postlink" href="http://www.aadioak.com/index.html">www.aadioak.com/index.html</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.aadioak.com/ao.css">www.aadioak.com/ao.css</a><!-- w -->
Any ideas? I'm feeling horrible turning to a forum for a help, I do this work for a living. How can I be missing this? Given it's 5:07 in the morning, I still think I should be picking this up.
-Steve
EDIT: Also, the contact info image at the bottom will NOT go any further down, regardless of margins applied or absolute positioning. Is this a common bug I can fix? I'm tempted to use image space to space it down by default, but I hate the idea of it.To center with margin:0 auto the width must also be defined.haha, isn't width defined? My god I'm useless. Alright, the width for the container? I can't believe this, the layout is the stuff of tutorials for beginners and I am totally roughed up by it, haha. Thanks, I'll go define a width to every single item on the page. No width will go undefined.I'll go define a width to every single item on the page. No width will go undefined.Don't overdo it, just for the elements to be centered.
hmm, where would you apply a width, Fang? Should I do it in html rather than css? It still isn't centering... And that contact image won't budge any lower either. I'm obviously missing a width value somewhere... As I see it though, _all_ divisions have a width value.change thisdiv#bar {
background:url(bg.jpg) repeat;
width:100%;
height:425px;
border-style:solid;
border-width:1px;
border-color:#f0efee #fff;
margin-top:8px;
margin-left: 0 auto;
margin-right: 0 auto;
}to this div#bar {
background:url(bg.jpg) repeat;
width:760px;
height:425px;
border-style:solid;
border-width:1px;
border-color:#f0efee #fff;
margin: 8px auto;
}Little tweek:margin: 8px auto 0;Alright, well I altered the page set up and now that diagonal line background is actually the body background rather than a container-style division. it's still not entirely logical or efficient, but things are centering and it's meeting standards. However, the contact division still won't stop being a tit and just go down like its margin tells it to. And thanks with the width thing, I had no idea a percentage wouldn't work with it. Why is that? Because it would have to dynamically update with window resizing?awwww no, I'm sorry, I'm the tit. Not the contact div. I was using margins like padding, which is 100% a bad idea. haha, sweet! I should go flip burgers.Percentages work, except when they're 100% for the obvious reason.You can use a percentage, but why have a div if it is 100% wide?
Give the contact a clear: both;wow. I need a lot of practice. I'm failing to see how it works with percentages, so I'm becoming positive I'm failing to see why my layout is working now, haha.
Having a 100% wide div really wasn't a good idea. I'm full of the bad ones though. I credit it to me being in the early learning phase.Be also advised the margin:auto will not in quirks-mode. You need a valid DOCTYPE for it to workI'm using strict html 4.01. It was chaos for a few minutes to figure out doc type stuff. I get the vibe that everyone should use strict types for the sake of standards but still I don't fully understand their purpose other than to tell the browser how to read the data.
Thanks though, I wasn't aware of that until now.I don't fully understand their purpose other than to tell the browser how to read the data
That is exactly the purpose. The DOCTYPE tells the browser to render the page in a "standard" format no matter what browser (IE, Safari, Opera, Firefox). DOCTYPEs stop proporietary browser code from cluttering documents. Internet Explorer is known for it's proprietary code (MARQUEE for example)Internet Explorer is known for it's proprietary code (MARQUEE for example) Is also supported by Firefox.W3C
"The MARQUEE element. Note. The MARQUEE element is not defined by a W3C specification."
<!-- w --><a class="postlink" href="http://www.aadioak.com/index.html">www.aadioak.com/index.html</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.aadioak.com/ao.css">www.aadioak.com/ao.css</a><!-- w -->
Any ideas? I'm feeling horrible turning to a forum for a help, I do this work for a living. How can I be missing this? Given it's 5:07 in the morning, I still think I should be picking this up.
-Steve
EDIT: Also, the contact info image at the bottom will NOT go any further down, regardless of margins applied or absolute positioning. Is this a common bug I can fix? I'm tempted to use image space to space it down by default, but I hate the idea of it.To center with margin:0 auto the width must also be defined.haha, isn't width defined? My god I'm useless. Alright, the width for the container? I can't believe this, the layout is the stuff of tutorials for beginners and I am totally roughed up by it, haha. Thanks, I'll go define a width to every single item on the page. No width will go undefined.I'll go define a width to every single item on the page. No width will go undefined.Don't overdo it, just for the elements to be centered.
hmm, where would you apply a width, Fang? Should I do it in html rather than css? It still isn't centering... And that contact image won't budge any lower either. I'm obviously missing a width value somewhere... As I see it though, _all_ divisions have a width value.change thisdiv#bar {background:url(bg.jpg) repeat;
width:100%;
height:425px;
border-style:solid;
border-width:1px;
border-color:#f0efee #fff;
margin-top:8px;
margin-left: 0 auto;
margin-right: 0 auto;
}to this div#bar {
background:url(bg.jpg) repeat;
width:760px;
height:425px;
border-style:solid;
border-width:1px;
border-color:#f0efee #fff;
margin: 8px auto;
}Little tweek:margin: 8px auto 0;Alright, well I altered the page set up and now that diagonal line background is actually the body background rather than a container-style division. it's still not entirely logical or efficient, but things are centering and it's meeting standards. However, the contact division still won't stop being a tit and just go down like its margin tells it to. And thanks with the width thing, I had no idea a percentage wouldn't work with it. Why is that? Because it would have to dynamically update with window resizing?awwww no, I'm sorry, I'm the tit. Not the contact div. I was using margins like padding, which is 100% a bad idea. haha, sweet! I should go flip burgers.Percentages work, except when they're 100% for the obvious reason.You can use a percentage, but why have a div if it is 100% wide?
Give the contact a clear: both;wow. I need a lot of practice. I'm failing to see how it works with percentages, so I'm becoming positive I'm failing to see why my layout is working now, haha.
Having a 100% wide div really wasn't a good idea. I'm full of the bad ones though. I credit it to me being in the early learning phase.Be also advised the margin:auto will not in quirks-mode. You need a valid DOCTYPE for it to workI'm using strict html 4.01. It was chaos for a few minutes to figure out doc type stuff. I get the vibe that everyone should use strict types for the sake of standards but still I don't fully understand their purpose other than to tell the browser how to read the data.
Thanks though, I wasn't aware of that until now.I don't fully understand their purpose other than to tell the browser how to read the data
That is exactly the purpose. The DOCTYPE tells the browser to render the page in a "standard" format no matter what browser (IE, Safari, Opera, Firefox). DOCTYPEs stop proporietary browser code from cluttering documents. Internet Explorer is known for it's proprietary code (MARQUEE for example)Internet Explorer is known for it's proprietary code (MARQUEE for example) Is also supported by Firefox.W3C
"The MARQUEE element. Note. The MARQUEE element is not defined by a W3C specification."