13 replies [Last post]
Zygote76
Offline
Regular
Ohio
Last seen: 11 years 37 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-08-20
Posts: 25
Points: 3

Well I have a couple of questions. I'm new to CSS and am getting the hang of it or I thought. I'm going to post the code but unfortunately the site is not online yet.

My first problem I am having is with my linked css doc. when I go to check for errors using Dreamweaver 8 I am told that there is an error on line 6 in external CSS files for IE 5.5 and 6.0 but not what the problem is. When I Validate it using the site http://validator.w3.org/check it says no problem

Also you'll notice that I have to navigation menus set up. I did the first one and was asked to add a flyout/dropdown menu. After following along with some tutorials and using some code as a template I've gotten a close to desirable result to model a fresh start from. The problem I am running into is that the second menu is not centering itself and I'm not sure why. Also when displayed in IE it shrinks in size and seems to lose its formatting. If anyone can help you head me in the right direction I would greatly appreciate it.

Heres the code and Thanks,

html code

Dayton Aerodynamic Center Home Page

#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}

Dayton Aerodynamic Center

test imageThe Dayton Aerodynamic Center offers a large variety of technologies from Industrial Air Handling Equipment to Solar Technology. Our company has developed effecient and clean compressors and wind tunnels for automotive, scientific and leisure purposes.

Testing the Header Values of H2

testRightum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci

CSS Code

/* CSS Document */
tml, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
color:#FFFFFF;
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper {
background-color:#999999;
margin: 20px auto;
width: 770px;
border: 1px solid #000000;
text-align: left;
}

#banner {
height: 118px;
background-image: url(../testHeader.jpg);
background-repeat: no-repeat;
}

#nav {
border-bottom: 1px solid #000000;
}

#nav ul {
padding: 5px 0px 5px 0px;
margin: 0px;
background-color:#660000;
text-align: center;
}

#nav ul li {
display: inline;
margin: 0px;
padding: 0px;
}

#nav ul li a {
font-size: 80%;
color:#FFFFFF;
background-image:url(../metalBack.jpg);
text-decoration: none;
font-weight:bold;
padding: 5px 10px 5px 10px;
text-align: center;
border-right: solid 1px #000000;
border-left: solid 1px #000000;
}

#nav ul li a:hover, #nav ul li a:focus {
background-image:url(../metalBackOvr.jpg);
}

#content p{
margin: 20px;
margin-left: 20px;
}

#content h1{
color:#000000;
padding: 0 px;
margin: 20px;
font-size: 130%;
text-align:center;
}

#content h2{
color:#000000;
padding: 0 px;
margin: 20px;
margin-left: 20px;
font-size: 110%;
}

.leftimage {
margin: 0px 10px 0px 0px;
float: left;
border: 1px solid #000000;
}

.rightimage {
margin: 0px 0px 20px 15px;
float: right;
width: 150px;
border: 1px solid #000000;
}

.clearit {
display: block;
clear: both;
}

#footer {
clear:right;
color: #FFFFFF;
background: #660000;
border-top: 1px solid #000000;
}

#footer p{
font-size: 70%;
padding: 3px;
font-weight:bold;
text-align:center;
}

.container{
width: 99%;
float:right;
background-color:#66CCFF;
}

/* Begin CSS Drop Down Menu */

#menuh-container
{
position: absolute;
top: 1em;
left: 1em;
}

#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
font-weight:bold;
width:100%;
text-align:center;
}

#menuh a
{
text-align: center;
display:block;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
white-space:nowrap;
margin:0;
padding: 0.2em;
}

#menuh a, #menuh a:visited /* menu at rest */
{
color: white;
background-color:#666666;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color:#660000;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:10em;
text-align:center; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

As far as DW vs. W3C

As far as DW vs. W3C validators, I would recommend listening to W3C.

As far as your code, the first issue i see is

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; border: 0; } You are missing the h in html

but that could just be a pasting error

After that, if you are building a brand new site, using a transistional doctype would be incorrect, please us a strict xhtml 1.0 or strict html 4.01

I could be wrong about this, but I have heard rumours that using 100% font-size in your body can mess things up in IE for some unknown reason and to use 100.1%

Also,

your html seems malformed

<snip>

  • Solar Technology
  • Compressors
  • IAH Equipment
  • Contact Us
  • but again, could be some sort of pasting issue

    it should be

    <snip>

  • Solar Technology
  • Compressors
  • IAH Equipment
  • Contact Us
  • You seem to be pretty well on your way. If we could see a live example of the IE issue, it would probably help out a bit more.

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    If setting a body font-size

    If setting a body font-size 100% it's advisable to make it 100.1% due to a bug in IE6 that will render font sizes below a certain level to disappear to nothing, the .1% prevents this happening.

    It looks as though you are probably going to get compound font size problems saying 80% is 80% of the parent size the anchor rule will be 80% of 80% so you have probably got an actual font size of around 10px a third level and you'll have about 8px.

    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

    Zygote76
    Offline
    Regular
    Ohio
    Last seen: 11 years 37 weeks ago
    Ohio
    Timezone: GMT-4
    Joined: 2007-08-20
    Posts: 25
    Points: 3

    Thanks, Yeah the missing h

    Thanks,

    Yeah the missing h is a pasting error, as for the malformed code. I was referencing a tutorial that had told me not doing that would help prevent it from displaying spaces between the list items. When I fix it the menu items get unusual gaps between.

    Here are some images to illustrate a little better. When I get home I can load the pages to server but I don't have the ftp info here with me.

    Figure 1 shows the correct menu text size in FF but also shows the gaps when I fix the html code on the listed items

    Photo Sharing and Video Hosting at Photobucket

    Figure 2 shows the incorrect font size in IE (probably from the 100%) but also illustrates the bottom menu incorrectly aligning to the left (a problem in all browsers.

    Photo Sharing and Video Hosting at Photobucket

    Thanks Again

    Katie
    Katie's picture
    Offline
    Enthusiast
    Seattle, WA
    Last seen: 6 years 4 weeks ago
    Seattle, WA
    Timezone: GMT-8
    Joined: 2006-08-06
    Posts: 357
    Points: 2

    In your HTML code, I noticed

    In your HTML code, I noticed that you've got HTML comments inside your style section.

    Inside style, you must comment things using /* and */ in place of the <!-- and -->. At best, those "commented" style declarations will be applied to the document, and they just might force IE into quirks mode, which can cause weird behavior.

    So, that's just one more thing I'd clean up.

    Blog: Pew Pew Laser Blog
    Online File Storage: DropBox
    Daily Deals on Local Activities: Groupon

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Katie comments used in this

    Katie comments used in this way were/are a means of ensuring that older browsers that didn't understand style or script tags would not display the contents as character data.

    They wouldn't force IE into quirks mode.

    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

    Katie
    Katie's picture
    Offline
    Enthusiast
    Seattle, WA
    Last seen: 6 years 4 weeks ago
    Seattle, WA
    Timezone: GMT-8
    Joined: 2006-08-06
    Posts: 357
    Points: 2

    Really? It just looks so

    Really? It just looks so odd.

    I'm curious - which browsers wouldn't read a style tag (or ignore it, if unreadable)?

    Blog: Pew Pew Laser Blog
    Online File Storage: DropBox
    Daily Deals on Local Activities: Groupon

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 4 years 20 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    Hugo wrote:...older

    Hugo wrote:
    ...older browsers...

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Yeah really This was a

    Yeah really Smile

    This was a common practise , and force of habit still makes me add them if and when I'll have cause to embed styles although the tendency now is to use the cdata section wrapped in a convuluted comment structure.

    The same applies to script tags and it's wise one way or another to cover this aspect of embeding script/styles, better though is to always link to such 'stuff'

    Older browsers are anything preceeding v4 browsers, and probably some v4 browers as well (NN4 was a legendry nightmare , although it did understand style tags just not the properties contained within)

    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

    Zygote76
    Offline
    Regular
    Ohio
    Last seen: 11 years 37 weeks ago
    Ohio
    Timezone: GMT-4
    Joined: 2007-08-20
    Posts: 25
    Points: 3

    Any Idea why I would have to

    Any Idea why I would have to have my html like this

    versus this to get the proper alignment for the steel button nav? I'm just curious as to how and why it works like that. Since I am using a flyout menu in this site it doesn't matter too much but would be good to know for future referece:

    <snip>

  • Solar Technology
  • Compressors
  • IAH Equipment
  • Contact Us
  • Thanks

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    You don't have to, it's done

    You don't have to, it's done due to the absolute POS IE6 and it's inability to get anything right including white space. You can also prevent the problem by ensuring anchors have hasLayout triggered through something like width or height.

    If you go to the 'Off Topic' area you will see a detailed thread explaining the problem and solutions.

    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

    Zygote76
    Offline
    Regular
    Ohio
    Last seen: 11 years 37 weeks ago
    Ohio
    Timezone: GMT-4
    Joined: 2007-08-20
    Posts: 25
    Points: 3

    Thanks Hugo, I'm still

    Thanks Hugo,

    I'm still having problems with the new menu. I'm happy to say that I have the dropdown/flyout menu working the way I wanted it to but the positioning, font size <--(IE only), and Background (for container in FF) are still buggy. I have cleaned up the code and made what I thought would be working changes. I added a container for the menu with a background color and set the alignment to center but it's not working. I'm including the code and some sample images as I am not able to put the site online yet =(

    Fig3 shows failures in IE 6.0 (go figure lol)
    Photo Sharing and Video Hosting at Photobucket

    Fig4 shows the problems when viewing in FF
    Photo Sharing and Video Hosting at Photobucket

    The HTML:

    Dayton Aerodynamic Center Home Page

    #menuh{float:none;}
    body{behavior:url(csshover.htc); font-size:100%;}
    #menuh ul li{float:left; width: 100.1%;}
    #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}

    Dayton Aerodynamic Center

    test imageThe Dayton Aerodynamic Center offers a large variety of technologies from Industrial Air Handling Equipment to Solar Technology. Our company has developed effecient and clean compressors and wind tunnels for automotive, scientific and leisure purposes.

    Testing the Header Values of H2

    testRightum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci

    The Revised CSS:

    /* CSS Document */
    html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    }

    body {
    color:#FFFFFF;
    font-size: 100.1%;
    background-color: #666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    #wrapper {
    background-color:#999999;
    margin: 20px auto;
    width: 770px;
    border: 1px solid #000000;
    text-align: left;
    }

    #banner {
    height: 118px;
    background-image: url(../testHeader.jpg);
    background-repeat: no-repeat;
    }

    #content p{
    margin: 20px;
    margin-left: 20px;
    }

    #content h1{
    color:#000000;
    padding: 0 px;
    margin: 20px;
    font-size: 130%;
    text-align:center;
    }

    #content h2{
    color:#000000;
    padding: 0 px;
    margin: 20px;
    margin-left: 20px;
    font-size: 110%;
    }

    .leftimage {
    margin: 0px 10px 0px 0px;
    float: left;
    border: 1px solid #000000;
    }

    .rightimage {
    margin: 0px 0px 20px 15px;
    float: right;
    width: 150px;
    border: 1px solid #000000;
    }

    .clearit {
    display: block;
    clear: both;
    }

    #footer {
    clear:right;
    color: #FFFFFF;
    background: #660000;
    border-top: 1px solid #000000;
    }

    #footer p{
    font-size: 70%;
    padding: 3px;
    font-weight:bold;
    text-align:center;
    }

    .container{
    width: 99%;
    float:right;
    background-color:#66CCFF;
    }

    /* Begin CSS Drop Down Menu */

    #menuh-container{
    text-align: center;
    background-color:#660000;
    width: 770px;
    }

    #menuh{
    font-size: 80%;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    width: 100%;
    text-align: center;
    }

    #menuh a{
    text-align: center;
    display:block;
    border:#000000 solid 1px;
    white-space:nowrap;
    margin:0;
    padding: 0.4em;
    }

    #menuh a, #menuh a:visited /* menu at rest */
    {
    color: white;
    background-color:#666666;
    text-decoration:none;
    }

    #menuh a:hover /* menu at mouse-over */
    {
    color: white;
    background-color:#660000;
    }

    #menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
    {
    background-image: url(../metalBackOvr.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    }

    #menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
    {
    background-image: url(nav_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
    }

    #menuh ul{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:10em;
    text-align:center; /* width of all menu boxes */
    }

    #menuh li{
    position:relative;
    min-height: 1px; /* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
    }

    #menuh ul ul{
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
    }

    #menuh ul ul ul{
    top:0;
    left:100%;
    }

    div#menuh li:hover{
    cursor:pointer;
    z-index:100;
    }

    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}

    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}

    /* End CSS Drop Down Menu */

    Again I appreciate all the help with this. Also if you have any suggestions for additional resources to bolster my knowledge I would be appreciative.

    Zygote

    lokiloks
    lokiloks's picture
    Offline
    Enthusiast
    Albuquerque, NM
    Last seen: 11 years 31 weeks ago
    Albuquerque, NM
    Timezone: GMT-6
    Joined: 2007-05-16
    Posts: 145
    Points: 24

    I don't know about others

    I don't know about others here, but I use this:

    * {
    padding: 0;
    margin: 0;
    border: 0;
    }

    instead of writing out each tag, it just works for me and it takes less characters.

    As far as getting the flyout to work in ie6 you're probably running into a problem because of your lack of javascript to fix it. I may be wrong, but I do know this type of menu system fails in some cases without it.

    If you haven't reviewed son of suckerfish thoroughly, I'd recommend it. Or, if you're brave enough to go with a "hack" version that doesn't use javascript at all and works on all modern browsers and degrades well you can try what I use. Visit www.cssplay.co.uk for the best examples of it.

    Hope that helps,
    LokiLoks

    Zygote76
    Offline
    Regular
    Ohio
    Last seen: 11 years 37 weeks ago
    Ohio
    Timezone: GMT-4
    Joined: 2007-08-20
    Posts: 25
    Points: 3

    Thanks Lokiloks I will have

    Thanks Lokiloks I will have to remember that to save some key strokes.

    Well I have the menu working great dropdowns position properly, and everything is in its place and both CSS and HTML are validated.

    Still having problems getting the navigation to center itself in the wrapper but I added another top level listed item to the nav menu and have about 2px left over on the right side which can be shaved off by adjusting the wrapper width.

    Thanks for the help and useful site references.
    Zygote