Anchor ignoring width declaration in MOZILLA?!

Dev Shed Forums Sponsor:

July 20th, 2004, 05:02 PM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Anchor ignoring width declaration in MOZILLA?!

I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment)

I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem.

Any feedback is greatly appreciated!

Here is the relevant CSS:

Code:

body, html
{
    min-width: 700px;
    background: url(/_test/images/nav-filler.gif) repeat-y;
    height: 100%;
    font: 1.2em Verdana;
    line-height: .8em;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

p, a, div
{
    font-size: 76%;
    padding: 0 10 0 0;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#header
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    z-index: 200;
    /*border: 1px solid #0F2B5B;*/
}

#header-right
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    background: url(/_test/images/header-filler.gif) repeat-x;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#content
{
    position: absolute;
    top: 154;
    left: 163;
    z-index: 300;
    margin: 0 0 0 0;
    padding: 0 10 0 0;
}

#left-nav
{
    position: absolute;
    top: 154;
    left: 0;
    right: 163;
    margin: 3 0 0 0;
    padding: 0 0 0 0;
    max-width: 163;
    display: block;
}

#nav-links
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 133;
}

#left-nav a
{
    color: #000000;
    font: 69% Verdana;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
    margin: 0 0 0 0;
    padding: 0 17 4 29;
    width: 155;
    text-decoration: none;
    display: block;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#left-nav a:hover
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}

#left-nav a:active
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}

#left-navContent
{
    color: #000000;
    font: 66% Verdana;
    width: 163;
    background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
    margin: 0 0 0 0;
    padding: 0 30 4 29;
    text-decoration: none;
}

.nav-itemBottom
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.nav-header
{
    color: #0F2B5B;
    font: bold 80% Verdana;
    margin: 00 20 0 0;
    padding: 7 0 6 32;
    width: 163;
    text-decoration: none;
    display: block;
}

#nav-headerType1
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}

#nav-headerType2
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}

#nav-headerType3
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}

#nav-headerType4
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}

#nav-headerType5
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}

Attached Images

internet-new040709-css.gif (63.8 KB, 151 views)

July 20th, 2004, 06:55 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 16 h 43 m 11 sec
Reputation Power: 642

always specify a lenght unit, em, %, px etc.
its only if the value is zero that you might omit it.
http://www.w3.org/TR/CSS21/syndata.html#length-units

Code:

.nav-header
{
    color: #0F2B5B;
    font: bold 80% Verdana;
    margin: 00 20 0 0;
    padding: 7 0 6 32;
    width: 163;
    text-decoration: none;
    display: block;
}

should be 

.nav-header
{
    color: #0F2B5B;
    font: bold 80% Verdana;
    margin: 0  20px 0 0;
    padding: 7px 0 6px 32px;
    width: 163px;
    text-decoration: none;
    display: block;
}

you need to go through the whole css to fix this

July 21st, 2004, 12:49 PM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Ok, I've done that, but it still does not effect the box for the anchor. It is entirely too wide in Mozilla.

July 21st, 2004, 03:02 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 16 h 43 m 11 sec
Reputation Power: 642

in order to help you should either supply some markup, with the fixed css or a direct link to the site in question.

i assume since mozilla accept values without the use of px, that you are not using a proper doctype, http://www.hut.fi/u/hsivonen/doctype.html

always use a doctype that triggers the standard compliance mode.
when quirksmode msie uses it's own boxmodel not w3.org's so paddings and borders are not calculated to the width of the element,
this might be the cause of why the width is diffrent in msie and mozilla.
http://www.w3.org/TR/CSS21/box.html
http://css.maxdesign.com.au/listama...ut-boxmodel.htm

here is a list of valid doctypes and dtds
http://www.w3.org/QA/2002/04/valid-dtd-list.html

July 22nd, 2004, 09:00 AM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks again Akh, I will review & post my results.

July 22nd, 2004, 10:06 AM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Changing the doctype to transitional made IE act like Mozilla. Changing it to strict made IE work & Mozilla worse . . . now there are gaps in the menu.

As of right now, I've just got word that priority has changed & I have to complete another project, so when I get the chance to come back to this, I will upload this to a public spot so that I can get feedback.

This is my first serious foray into a CSS based layout. So, it's important for me to get it right. I will be back when this comes back up!

Thanks again Akh . . .

Anyways, here is the HTML/CSS:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>
    <title>QC Internet (New)</title>
    <link rel="STYLESHEET" type="text/css" href="qc-new.css" />
</head>

<body>

<div id="header">
<img src="/_test/images/header-left2.gif" width="498" height="154" alt="" border="0" />
</div>

<div id="header-right">
<img src="/_test/images/header-right.gif" width="169" height="154" alt="" border="0" align="right" />
</div>

<div id="content">
    <p>
    <strong>TEXT OMG TEXT</strong><br />
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    </p>
    
    <p>
    <strong>TEXT OMG TEXT</strong><br />
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    Paragraph of text to describe the text of paragraph about the text's paragraph.
    </p>
</div>

<div id="left-nav">
    <div class="nav-header" id="nav-headerType1">HOME PAGE</div>
    <div id="left-navContent">This is our homepage, please enjoy it!</div>
    <div class="nav-itemBottom"><img src="/_test/images/nav-item-bottom2.gif" width="163" height="11" alt="" border="0" /></div>
    
    <div class="nav-header" id="nav-headerType2">ABOUT US</div>
    <div class="nav-links">
        <a href="#">Mission Statement</a>
        <a href="#">Press Releases</a>
        <a href="#">Location</a>
        <a href="#">Employment</a>
        <a href="#">Newsletter</a><br />
    </div>
    <!-- <div class="nav-itemBottom"><img src="/_test/images/nav-item-bottom2.gif" width="163" height="11" alt="" border="0" /></div> -->
    
    <div class="nav-header" id="nav-headerType3">PRODUCTS</div>
    <div class="nav-links">
        <a href="#">Clinical</a>
        <a href="#">Accounts Receivable<br />& Billing</a>
        <a href="#">Accounts Payable</a>
        <a href="#">General Ledger</a>
        <a href="#">Payroll</a>
        <a href="#">Education</a>
        <a href="#">Seminars</a>
        <a href="#">User Groups</a></div>
    <div class="nav-itemBottom"><img src="/_test/images/nav-item-bottom2.gif" width="163" height="11" alt="" border="0" vspace="0" hspace="0" /></div>
    
    <div class="nav-header" id="nav-headerType4">ASSOCIATES</div>
    <div class="nav-links">
        <a href="#">Association<br />Memberships</a>
        <a href="#">Tradeshows</a>
        <a href="#">Feet on the Street</a>
    </div>
    <div class="nav-itemBottom"><img src="/_test/images/nav-item-bottom2.gif" width="163" height="11" alt="" border="0" /></div>
    
    <div class="nav-header" id="nav-headerType5">CONTACT US</div>
    <div class="nav-links">
        <a href="#">Request Demo</a>
        <a href="#">Support</a>
        <a href="#">Sales</a>
        <a href="#">Ask Carla</a>
    </div>
    <div class="nav-itemBottom"><img src="/_test/images/nav-item-bottom2.gif" width="163" height="11" alt="" border="0" /></div>
</div>

</body>
</html>

Code:

body, html
{
    min-width: 700px;
    background: url(/_test/images/nav-filler.gif) repeat-y;
    height: 100%;
    font: 1.2em Verdana;
    line-height: .8em;
    margin: 0;
    padding: 0;
}

p, a, div
{
    font-size: 76%;
    padding: 0 10px 0 0;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#header
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 200;
    /*border: 1px solid #0F2B5B;*/
}

#header-right
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    background: url(/_test/images/header-filler.gif) repeat-x;
    margin: 0;
    padding: 0;
}

#content
{
    position: absolute;
    top: 154px;
    left: 163px;
    z-index: 300;
    margin: 0;
    padding: 0 10 0 0;
}

#left-nav
{
    position: absolute;
    top: 154px;
    left: 0;
    right: 163px;
    margin: 3 0 0 0;
    padding: 0;
    max-width: 163px;
    display: block;
}

.nav-links
{
    margin: 0;
    padding: 0;
    width: 163px;
    background: url(/_test/images/nav-item-bottom2.gif) no-repeat bottom;
}

#left-nav a
{
    color: #000000;
    font: 69% Verdana;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0 17px 4px 29px;
    width: 155px;
    text-decoration: none;
    display: block;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#left-nav a:hover
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}

#left-nav a:active
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}

#left-navContent
{
    color: #000000;
    font: 66% Verdana;
    width: 163;
    background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
    margin: 0;
    padding: 0 30 4 29;
    text-decoration: none;
}

.nav-itemBottom
{
    margin: 0;
    padding: 0;
}

.nav-header
{
    color: #0F2B5B;
    font: bold 80% Verdana;
    margin: 0 20px 0 0;
    padding: 7px 0 6px 32px;
    width: 163px;
    text-decoration: none;
    display: block;
}

#nav-headerType1
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}

#nav-headerType2
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}

#nav-headerType3
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}

#nav-headerType4
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}

#nav-headerType5
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}

July 22nd, 2004, 11:49 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 16 h 43 m 11 sec
Reputation Power: 642

the xml declaration makes msie go back to quirksmode,
you can see this if you look at this page again. http://www.hut.fi/u/hsivonen/doctype.html

so you might want to drop that to make msie render in standard compliance mode.

i can still see some places in your css where you have forgotten to specify a length unit. make sure all paddings, margins and width values other than zero has a lenght unit.

a good place to check your css is w3.orgs validator
http://jigsaw.w3.org/css-validator/

July 22nd, 2004, 12:15 PM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Ok, I ran the validator on the CSS/XHTML, the only warnings refer to lack of a generic font-family for the CSS & the box-sizing, and now all numeric designations have a length unit!

The XHTML referred to "border" not being a valid attribute of IMG . . . & it only dinged one of the "border"s on the page, not every single IMG BORDER. HUH?! That thing is lying.

It all validates, & I read the article on invoking the correct mode. I have it set now to both being STRICT/STANDARDS mode. I'll have to dink around with this later.

July 22nd, 2004, 12:25 PM

TheJim01

Coconuts migrate?

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2004

Location: http://middle.nowhere.com

Posts: 1,894

Folding Points: 67725 Folding Title: Intermediate Folder

Time spent in forums: 2 Weeks 5 Days 10 h 4 m 38 sec
Reputation Power: 1173

Just a thought: don't inline elements ignore the "width" attribute? And aren't anchors inline-level elements? This is another case where the "inline-block" attribute would be really nice...

What will probably be needed is a container block for the links, and then each link floated so that they'll show up side-by-side, yet still retain their width attribute.

Just a thought.

__________________

When in doubt, Google it!

> HTML/XHTML/CSS/PHP/MySQL/Javascript/More Tutorials @ w3schools.com <

Proud member of the T.S.N.B.U.F.L (tables should not be used for layout) alliance.

"Only use elements for their intended purpose. You wouldn't try to make coffee with a telephone, would you?" -Me

#10

July 22nd, 2004, 01:03 PM

LAYGO

Registered User

Join Date: Jul 2004

Location: Dallas TX

Posts: 15

Time spent in forums: < 1 sec
Reputation Power: 0

Yes TheJim01, they are Inline, but they are defined as Block in the CSS.

I have tried to create a container for them, but did not try to float them . . . I can give it a whirl!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: