I'm having some issues with this (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/default3.asp">http://www.medford.k12.or.us/default3.asp</a><!-- m -->) page. You'll notice the very ackward marin between the h1 & container. I can fix it with negative margins, but I would prefer to figure out what is causing the problem in the first place.Dead link I'm afraid, can't see anything.dang those internal urls, link's fixed nowah, just validatated and it was invalid, perhaps fixing that will fix my marginsnope, xhtml is valid again and still the nasty margin is still there. any ideas?The gap is being caused by the ul in the #nav div tag. Change your styles accordingly to match this:
#nav ul{
margin-top:0;
list-style-type:none;
}
That seems to fix the problem, not sure why the problem exists in the first place though.odd, thanks for the fix, will try it out first thing tommorowIt should work for you but I just realised that I only tested it in IE. When I'm coding I use IE because I like the way it uses notepad to view and edit the source. Usually I would have tested in a variety of browsers but I forgot, sorry.odd... i just looked at that page with the firefox outline block elements enabled (webdev extension) and it shifted to the correct place, but when I disabled it it moved back. it looks like that space is only there due to the ul though. thanks again.This helped for Safari:
#container ul { margin-top: 0px; }
I've found it helpful to go overboard and make my first line of CSS set padding and margin to zero, and take care of a few other things, like this:
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
font-family: Verdana, Arial, sans-serif;
color: #000;
font-size: 11px;
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 150%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
But I'll be the first in line to say I do not write lean CSS.samij586 - Yeah, also does that if you put border:1px solid; into the content div styles. By the way, do you have a link to the web-dev extension, I used to have it for Mo and Moz FB/FF but then I got a new HDD and I lost the URL.
TimeBandit - Your CSS can be simplified quite a lot, although I'm not sure what font-style and font-varient do.
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
color: #000;
font-style: normal;
font-variant: normal;
font:normal 11px/150% "Verdana", "Arial", sans-serif;
margin: 0;
padding: 0;
}They are not normally required if you have just written: 'font:normal' since that specifics a normal style and normal variant as default.Originally posted by lavalamp
TimeBandit - Your CSS can be simplified quite a lot,
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
color: #000;
font-style: normal;
font-variant: normal;
font:normal 11px/150% "Verdana", "Arial", sans-serif;
margin: 0;
padding: 0;
}
Thank you, but during my initial learning of CSS I did try to use the shortcuts. Sometimes they did not work in the browsers I tested and what fixed the problem was being verbose, writing it out. So now I'm in that habit. I can't give any examples... i wish I knew off the top of my head exactly what works where but I don't. All I know is I ran into the issue and resolved it by being verbose.
It's the same way with "font:10px Arial whatever;" Sometimes it has helped me resolve font issues by being verbose with the font declarations. font-size, font-family, etclavalamp: <!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#webdeveloper">http://texturizer.net/firefox/extensions/#webdeveloper</a><!-- m -->
#nav ul{
margin-top:0;
list-style-type:none;
}
That seems to fix the problem, not sure why the problem exists in the first place though.odd, thanks for the fix, will try it out first thing tommorowIt should work for you but I just realised that I only tested it in IE. When I'm coding I use IE because I like the way it uses notepad to view and edit the source. Usually I would have tested in a variety of browsers but I forgot, sorry.odd... i just looked at that page with the firefox outline block elements enabled (webdev extension) and it shifted to the correct place, but when I disabled it it moved back. it looks like that space is only there due to the ul though. thanks again.This helped for Safari:
#container ul { margin-top: 0px; }
I've found it helpful to go overboard and make my first line of CSS set padding and margin to zero, and take care of a few other things, like this:
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
font-family: Verdana, Arial, sans-serif;
color: #000;
font-size: 11px;
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 150%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
But I'll be the first in line to say I do not write lean CSS.samij586 - Yeah, also does that if you put border:1px solid; into the content div styles. By the way, do you have a link to the web-dev extension, I used to have it for Mo and Moz FB/FF but then I got a new HDD and I lost the URL.
TimeBandit - Your CSS can be simplified quite a lot, although I'm not sure what font-style and font-varient do.
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
color: #000;
font-style: normal;
font-variant: normal;
font:normal 11px/150% "Verdana", "Arial", sans-serif;
margin: 0;
padding: 0;
}They are not normally required if you have just written: 'font:normal' since that specifics a normal style and normal variant as default.Originally posted by lavalamp
TimeBandit - Your CSS can be simplified quite a lot,
body, div, p, td, th, li, ul, dd,
form, select, input, textarea,
h1, h2, h3, h4, h5, h6, acronym, a {
color: #000;
font-style: normal;
font-variant: normal;
font:normal 11px/150% "Verdana", "Arial", sans-serif;
margin: 0;
padding: 0;
}
Thank you, but during my initial learning of CSS I did try to use the shortcuts. Sometimes they did not work in the browsers I tested and what fixed the problem was being verbose, writing it out. So now I'm in that habit. I can't give any examples... i wish I knew off the top of my head exactly what works where but I don't. All I know is I ran into the issue and resolved it by being verbose.
It's the same way with "font:10px Arial whatever;" Sometimes it has helped me resolve font issues by being verbose with the font declarations. font-size, font-family, etclavalamp: <!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#webdeveloper">http://texturizer.net/firefox/extensions/#webdeveloper</a><!-- m -->