Forum Home
Press F1
 
Thread ID: 76806 2007-02-16 13:43:00 CSS problem, positioning and colour Morgenmuffel (187) Press F1
Post ID Timestamp Content User
525233 2007-02-16 13:43:00 Hi all

Weirdly enough this works perfectly well in IE6, but not in firefox or Opera

so here goes i have added some code to a site That is supposed to put a menu bar across the pages with the relevant links in it, and it works just fine in IE, however in firefox, a menu bar that is supposed to be below it is printed over top of it so the text from one is superimposed on top of the other one.



<div id="sbo_headmenu">
<div id="sbo_row">
<a href="www.asite.co.nz ||
<a href="www.asite.co.nz Information</a> ||
<a href="www.asite.co.nz ||
<a href="www.asite.co.nz Team</a> ||
<a href="www.asite.co.nz ||
<a href="www.asite.co.nz ||
<a href="www.asite.co.nz </a>
color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> </div>
color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> </div>
<!-- and this is the bit that gets printed on top -->

<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
color: #444444; font-style:italic; "> <li><?php ?></li>
color: #444444; font-style:italic; "> <li><?php ?></li>
</ul>
color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> </div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> </div>
<br class="clearBoth" />
color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> </div>



and the relevant bit in the CSS file



#sbo_headmenu {
background-image: url(www.asite);
background-repeat: repeat;
height: 20px;
position: static;
padding-right: color: #444444; font-style:italic; "> 10px;
padding-left: color: #444444; font-style:italic; "> 10px;
color: #ffffff;
border: 0;
}
#sbo_row {
font-family: Arial, Helvetica, Verdana, sans-serif;
padding-top: 2px;
color: #ffffff;
font-size: 10pt;
}





Any help would be greatly appreciated 		Morgenmuffel (187)
525234 2007-02-16 20:20:00 Go ahead, Bletch, we know that you are tempted to click the "post reply" button. :D

Am I right to say that the problem with the website in FF or Opera is that the links are superimposed onto the texts of the web page? I am not much of a CSS programmer myself, but I reckon inserting the tag "position: relative" into #sbo_row might help?

Cheers :) 		Renmoo (66)
525235 2007-02-16 23:18:00 Hi All

no the "position: relative" thingie made no difference, although it is probably a positioning problem but I have changed everything a dozen times in relation to positioning to no avail,

Is there any software/Plugin out there that tells me what styles are acting on an object? 		Morgenmuffel (187)
525236 2007-02-17 00:05:00 Go ahead, Bletch, we know that you are tempted to click the "post reply" button. :DHehe yes, very tempted if I can track it down - but unfortunately both FF and Opera are broken (along with every single other gtk app on my system - damn that ******* who released a broken update to glibc!), but if the question hasn't been answered by the time I fix it...

I took a look at your code, and I'm willing to hazard a guess:
I think that position:static is causing your problem. The reason it renders fine in IE is because IE doesn't support the 'static' setting for position, whereas both FF and Opera do support it. Try removing that line completely and see what happens.

Nigel - are you actually aware of what position:static is supposed to be used for?

Nigel - yes, there is such a style plugin - the webdeveloper toolbar for FF can do it. Reading your stylesheet will also give you this information :D 		Erayd (23)
525237 2007-02-17 02:01:00 I took a look at your code, and I'm willing to hazard a guess:
I think that position:static is causing your problem . The reason it renders fine in IE is because IE doesn't support the 'static' setting for position, whereas both FF and Opera do support it . Try removing that line completely and see what happens .


Removing the line makes no difference



Nigel - are you actually aware of what position:static is supposed to be used for?

I have no idea but i got to the point where i was trying everything to get it to work



Nigel - yes, there is such a style plugin - the webdeveloper toolbar for FF can do it . Reading your stylesheet will also give you this information :D
I do normally use the "edit css" feature in webdeveloper, but that doesn't seem to be getting me any closer to the solution . 		Morgenmuffel (187)
525238 2007-02-17 02:18:00 Bah humbug

after 24 hours of working on this

I found the problem was i hadn't set an image height, (well i had but I set it on another sites stylesheet that i had open for comparison, and it wasn't until i noticed that site was screwed up, that i realised what i had done)


F#@$#K ^^&&* *&^^ **@&$% (*&&(*&^ )(*&*$@##$@#$ and thats all i have to say on that matter 		Morgenmuffel (187)
525239 2007-02-17 04:47:00 Glad you got it sorted :D Erayd (23)
1