Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
ff bg color issue
please help!… oddly enuff everything is working in ie, but ff is not ‘rendering’ the #nav ‘s bg color…
<a href=“http://www.arcintel.com/new”>http://www.arcintel.com/new</a>
html…
<code>
<div id=“head”>
<h3><a href=“index.php” title=“Home” accesskey=“h”>ArcIntel</a></h3>
<form action=”“ method=“post” id=“login”>
<fieldset>
<input type=“text” name=“un” />
<input type=“password” name=“pw” />
</fieldset>
</form>
<div id=“nav”>
<a href=“service.php” title=“Services” accesskey=“s”>Services</a>
<a href=“portfolio.php” title=“Portfolio” accesskey=“p”>Portfolio</a>
<a href=“about.php” title=“About” accesskey=“a”>About</a>
<a href=“contact.php” title=“Contact” accesskey=“c”>Contact</a>
</div>
</div>
<div id=”<?php echo $pageID;?>Bg”>
…
css…
#head {padding:0;border:0;margin:0;width:100%;}
h3 {padding:0;border:0;margin:0;float:left;}
#login {padding:0;border:0;margin:0;}
#login fieldset {padding:0;border:0;margin:0;}
#login input {padding:0;border:1px solid;margin:.25em .25em .25em 0;float:right;}
#nav {padding:0% 0% 0% 25%;border:0;margin:0% -25% 0% 0%;width:100%;background:#000000;color:#ffffff;border:1px solid red;}
#nav a {padding:0;border-width:0 1px 0 1px;border-style:solid;margin:0 -1px 0 -1px;width:12.5%;float:left;text-align:center;background:#000000;color:#ffffff;font-weight:bold;}
…
</code>
ive added the red border to the #nav just to help ‘error check’.
thank you so much in advance for any help!
Last edited by arcintel (2006-04-25 14:41:37)
thank you
Offline
#2 2006-04-25 14:25:10
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: ff bg color issue
You can wrap your code in < code > < /code > tags (without the spaces) to display it properly.
Offline
Re: ff bg color issue
heh thx
thank you
Offline
#4 2006-04-25 19:30:49
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: ff bg color issue
You specified white text on a black background which is exactly what I see in FireFox.
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: ff bg color issue
yull notice the problem if u do an ie and ff comparison…
yes the link txt is white and the individual link bg is black, but the entire width of the nav is supposed to be black as well… which ie does correctly, but ff does not. i just added the red border back to the #nav so you can see that it is strangely ‘collapsed’…
thx
thank you
Offline
Re: ff bg color issue
some other oddness…
by adding the red border i get a horizontal scroll bar roughly 25 percent larger than the page?;
firefoxes developer toolbar plugin feature of outlining block lv elements registers the #nav as being its full size… whereas the red border says otherwise (‘collapsed’ to its top edge).
thank you
Offline
Re: ff bg color issue
It’s because you’re floating the links. display:inline is a much easier way in most cases, such as this one. Use an unordered or ordered list too:
<code>
#nav {
margin: 0 auto 25%;
background-color: #000;
text-align:center;
}
#nav li {
padding: 0.1em 0;
display: inline;
}
#nav a {
border-color: #555;
border-style:solid;
border-width:0 1px 0 1px;
padding: 0 1em;
color:#ffffff;
font-weight:bold;
}
#nav a:hover {
color: #eee;
}
</code>
<code>
<ul id=“nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Home</a></li>
</ul>
</code>
^no div needed to surround the nav
Offline
Re: ff bg color issue
my reason for doing things the way i have for a ridiculously ‘liquid’ layout, floating and percentage based so as to redraw evenly in all browser sizes…
i have tried, and just did again, using a list instead of a div for the nav… and displaying the ‘li’ ‘s as inline, and then the ‘li a’ ‘s as block… but this prevents declaring the links width as a percentage from working… either the li ‘s or the a ‘s.
thank you
Offline
Re: ff bg color issue
i have just reverted the link back to the ‘new’ list style so you can see what i am refering to…
<a href=“http://www.arcintel.com/new/”>http://www.arcintel.com/new/</a>
the code…
html
<code>
<ul id=“nav”>
<li><a href=“service.php” title=“Services” accesskey=“s”>Services</a></li>
<li><a href=“portfolio.php” title=“Portfolio” accesskey=“p”>Portfolio</a></li>
<li><a href=“about.php” title=“About” accesskey=“a”>About</a></li>
<li><a href=“contact.php” title=“Contact” accesskey=“c”>Contact</a></li>
</ul>
</code>
css…
<code>
ul {list-style:none;}
#head {padding:0;border:0;margin:0;width:100%;}
#nav {padding:0% 0% 0% 25%;border:0;margin:0% -25% 0% 0%;width:100%;background:#000000;color:#ffffff;border:1px solid red;}
#nav li {padding:0;border:0;margin:0;display:inline;width:12.5%;)
#nav li a {padding:0;border-width:0 1px 0 1px;border-style:solid;margin:0 -1px 0 -1px;width:100%;display:block;text-align:center;background:#000000;color:#ffffff;font-weight:bold;}
</code>
for some reason this also effects all of the styling for the ‘body and footer’ elements below… most likely due to the fact that i had done them in a percentage based method.
i am still at a loss as to why the original way i had done things would work fine in ie but not in firefox lol…
thank you
Offline
Re: ff bg color issue
fixed the parenthesis at the end of the #nav li line, which fixed all of the body and footer issues… but even removing the block link decleration and cleaning up the code a bit i am unable to define the links (li a) with a percentage width… think i was much closer to the goal using the original method.
thank you
Offline
Re: ff bg color issue
<a href=“http://www.arcintel.com/new/”>http://www.arcintel.com/new/</a>
the code that is up now…
<code>
#nav {padding:0;border:0;margin:0;width:100%;background:#000000;color:#ffffff;border:1px solid red;text-align:center;}
#nav li {padding:0;border:0;margin:0;display:inline;width:12.5%;}
#nav li a {padding:0;border-width:0 1px 0 1px;border-style:solid;margin:0 -1px 0 -1px;width:100%;text-align:center;background:#000000;color:#ffffff;font-weight:bold;}
</code>
i feel like im back at ‘square one’ lol
thank you
Offline
Re: ff bg color issue
Yours looks fine to me, but it might be easier to use the universal selector: <code>* { margin: 0; border: 0; padding: 0; }</code> This will reset margins and paddings for everything, but ultimately you’ll have more control.
This worked for me, but perhaps it’s not what you want.
<code>
#nav,#nav a { padding: 0.2em 0; }
#nav { background: #000; text-align: center; }
#nav li { display: inline;}
#nav a { border-right: 1px solid #eee; padding: 0.2em 0.5em; color: #fff; }
#nav a:hover { background: #ffe; color: #fcc; }
</code>
I can put up an example page if you’d like.
Last edited by deldindesign (2006-04-25 21:16:57)
Offline