10 replies [Last post]
Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Please look at this page: http://wisetopic.com/music/Register.aspx

In FireFox there is no padding under the sub nav menu, even though I added this style to the "InnerContent", which is the content area that is below the menu that is white:

#inner_content_area { border-left: solid 4px black; padding-left: 10px;

background-color: White;
width: 759px;
}
#inner_content_area .content
{
margin-top: 50px;
}

Here is the XHTML for the container:

Thanks,

-- jenni

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 36 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

You should validate your

You should validate your html, then your css.
If it doesn't fix the issue, come back.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

The pages are valid - except

The pages are valid - except for one error that involves an asp.net validation control, which I have no control over. This error obviously won't effect the issue I'm having.

http://validator.w3.org/check?uri=http%3A%2F%2Fwisetopic.com%2Fmusic%2FRegister.aspx&charset=%28detect+automatically%29&doctype=Inline

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes but change the DTD to

Yes but change the DTD to 'Strict' (as it should be for a new document) and you have 9 errors!

You could probably clean all those up rather than blame something out of your control.

The language attribute that is mentioned as the single error under your 'Trans' DTD is due to it being deprecated , so simply remove it, another error (under 'Strict') is the lack of a wrapping, block level, element for the form inputs; inline elements may not be direct children of block level ones you should be using the semantic accessible elements provided such as fieldset for this purpose.

The requirements for specific elements and well formdness of code in Strict are there for good reason and aren't that hard to achieve.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You may need to add

You may need to add 'clear:both' to the inner-content thingy div.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Hi,

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Hi, I've changed my doc

Hi,

I've changed my doc type to strict on this doc and cleaned up the errors that the validators returned the best I could. There is four remaining errors, all four have to do with ASP.NET's inability to render controls in valid XHTML. The solution to this problem would entail me rewriting these controls from scratch, including the validation controls. Since I did not initially create the asp.net pages, I just made the header's xhtmls, and am not a asp.net developer I am going to have to just deal with this.

So I added clear:both to the inner-content thingy. That didn't seem to do anything, so I added a
and that worked out ok.

No, there is a 2px tall gap above the menu and below the big header graphic that says "Music"... and I can't figure out why Sad

http://wisetopic.com/music/Register.aspx

Here is the XHTML for that section:

and the CSS:

#leadIn
{
float: left;
}
#leadIn div
{
float: left;
}
#leadIn a
{
font-family: Arial, Verdana, Tahoma;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: white;
border-left: solid 1px #000;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg.gif);
display: block;
padding: 7px 10px;
}
#leadIn a:hover
{
color: #f27b00;
}
/* Lead in menu mouse over states */
#leadIn a.cur01
{
color: White;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg_people.gif);
}
#leadIn a.cur02
{
color: White;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg_music.gif);
}
#leadIn a.cur03
{
color: White;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg_film.gif);
}
#leadIn a.cur04
{
color: White;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg_stores.gif);
}
#leadIn a.cur05
{
color: White;
background:#336868 url(http://wisetopic.com/_img/_core/leadIn_menu_bg_wisematch.gif);
}
#leadIn .endCap
{
border-left: solid 1px #000;
border-top:none;
display: block;
text-align: left;
background:#2c2c2c;
height: 28px;
width: 106px;
}
/* lead in left border (these two properties are the same, could use some inheirtence...)*/
.leadInBorderLeft
{
border-left: solid 4px #000;
float:left;
height: 189px;
width: 6px;
background: url(http://wisetopic.com/_img/_core/leadIn_border_bg.gif);
}
.leadInBorderRight
{
border-right: solid 4px #000;
float:left;
height: 189px;
width: 6px;
background: url(http://wisetopic.com/_img/_core/leadIn_border_bg.gif);
}
#leadInTop
{
width: 769px;
border-right: solid 4px #000;
border-left: solid 4px #000;
background: #2c2c2c;
height: 5px;
}

/* Sign Up Now box */
#signUp
{
float: left;
background:#336868 url(http://wisetopic.com/_img/_core/signUp_bg.gif);
width: 231px;
height: 188px;
border-right: solid 1px #000;
}
#signUp .txt
{
padding-left: 15px;
padding-top: 20px;
text-align: center;
font-family: Verdana;
font-size: 10px;
width: 200px;
color: White;
}
#signUp div
{

}

Does anyone see anything that could be causing that gap?

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

img is an inline element.

img is an inline element. Its default placement is with the bottom aligned to the text baseline. The text baseline is slightly above the bottom to allow space for letter descenders.

In this case the problem is coming from the image "leadln_Music.jpg".

The solution is to apply display:block to the image or vertical-align bottom.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Perfect! Thanks for the

Perfect! Thanks for the explanation - that worked great. I just added a display: block to the image and it totally wraps the way it should.

I just checked this page in IE and the button that says "Login Now" is missing! Its located above the text that reads "Sign up now for WiseTopic".

/_img/_core/signUp_text_music.gif" style="position: relative; left: 40px; top: 20px;" /> /register"> Sign Up Now/_img/_core/signUp_btn_on.gif" style="position: relative; left: 40px; top: 22px; border: 0px;" />

Sign up now for WiseTopic, or else your first born child will die.

/* Sign Up Now box */
#signUp
{
float: left;
background:#336868 url(http://wisetopic.com/_img/_core/signUp_bg.gif);
width: 231px;
height: 188px;
border-right: solid 1px #000;
}
#signUp .txt
{
padding-left: 15px;
padding-top: 20px;
text-align: center;
font-family: Verdana;
font-size: 10px;
width: 200px;
color: White;
}
#signUp div
{

}

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 36 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Remove position:relative;

Remove position:relative; from the style in the html for the images in div id="signUp"
Most of the html errors should be fixed as well as the css errors quite easily.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 43 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Thanks that did fix it.

Thanks that did fix it.