CSS - My Dynamic Map Is Wrong With Firefox

The website
Quote:
downloadwarez.org


CSS
Quote:
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }


/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }

/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;}

/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: none; }

/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }

/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }

.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 1em Arial, Sans-Serif; }

/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}

/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }

The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera.

The code looks ok, so i think it must be CSS. Can anyone help

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

Layout problem that works in IE but not in Firefox

I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

www[dot]cs[dot]lewisu[dot]edu/~ongni/usjournal/redesign/test3.htm

The structure holds in IE, but totally breaks down in Firefox.

Thanks in advance for the help.

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi be gentle with me im new
I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have
.backgroundbox {
background-attachment: fixed;
background-image: url(backpat1.png);
background-repeat: no-repeat;
background-position:top;
height:600px;
width:900px;
position:relative;
background-position: top left;
top: 0px;
left:0px;}
and in the body i have
<div class="biggestcolumn" "backpat1" align="center">
if someone could please tell me what ive done wrong.

I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating.

My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at:

http://www.theatrebayarea.org/v2/
and the css is he
http://www.theatrebayarea.org/v2/css/default.css

It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns?

Thanks,
Daniel

I have a DIV which is styled to have a bottom border. Nested inside of this DIV is another DIV, which defaults to display:none, but I'd like to use JavaScript to turn it to display:block.
When this happens, it works fine, but the bottom border for the parent DIV does not encapsulate the nested DIV as I would I assume it should.
Am I totally missing something here, or is this just standard behavior?

Here's the code. There is no other styling.
Code:

<style type="text/css">
	.multiCheck {
		padding:5px;
		margin:10px 0;
		border-top:dotted 2px #CCCCCC;
		border-bottom:dotted 2px #CCCCCC;
	}
		.multiCheck .title {
			padding:5px;
			font-size:1.2em;
			color:#003366;
			font-weight:bold;
		}
		.multiCheck .checkBox {
			margin-left:10px;
		}
</style>
</head>

<body>

	<div class="multiCheck"><div class="title"><input type="checkbox" name="mp_arg2_toggle" onClick="document.getElementById('newsLocations').style.display='block';" value="location"/> Location News:</div>
		<div class="checkBox" id="newsLocations" style="display:none;">

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="27" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="25" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="19" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="99" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="20" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="2" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="1" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="3" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="4" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="26" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="21" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="5" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="6" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="22" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="7" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="8" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="9" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="10" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="17" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="11" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>
		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="24" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="12" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="23" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="13" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="14" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="15" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="16" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="18" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		</div>
		</div></div>

Thanks in advance,
Colin

hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated.

here is the CSS
Code:

<style type="text/css">
html, body {padding: 0;
  color: #000; background: #eee;
  font-family: Arial, Veranda, sans-serif;
  margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
  font: bold 200%/1em Arial, Verdana, sans-serif;
  padding: 3em 1em 0; margin: 0 0 0 0;
  border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
  margin: 0; padding: 2.5% 12.5%; clear: left;
  border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
 border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
  font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
  text-decoration: none; font-weight: normal;
  border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;}    /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;}            /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc; 
  border-color: #eee #CCC #eee #ccc;}
</style>

and here is how it is being used in the html
Code:

<h1></h1>

<ul id="nav">
<li><a href="/render/">?</a></li>
<li id="current"><a href="/newmed/">contact us</a></li>
<li><a href="/photos/">about globalhotel</a></li>
<li><a href="/design/">my account</a></li>
<li><a href="/webdev/">hotels</a></li>
</ul>

<div id="main">
<p>
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

</div>

and finally here is a link to the page where i am having probs.

thanks in advanced

RF

On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around?

Thanks

Hello,

I'm confused about how exactly to name classes in a specific situation.
I'm getting unexpected results, and I'm not sure if it's browser support or my code.


Does

.classy a {
something: something;
}

describe all anchors nested in an element with the class "classy"?
Can I do that even?
Or is it the same as

.classy, a {
something: something;
}

To describe two things that both have the same styles.


Do I need comma's or is

.classy .classless {
something: something;
}

the same thing as

.classy, .classless {
something: something;
}


Thanks

Have some problem with my css. Would appreciate some comments on how to do this:

Here is the code: with explanation of what's not working:
It's a small "complete" htm file.....

Code:

<html>
<head>
<style>
.outer  {
	display: block;
	background-color: #bbb;
	border: 0;
	padding: 0;
	text-align: center;
	
	font-family: Arial,sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a  { 
	display: block;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a:hover { 
       text-decoration: underline; color: #fff; 
}
.outer a:hover .text-top  { 
       text-decoration: none; color: #000; 
}
</style>
</head>

<body style="background-color:#888;">

<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>

I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>

NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
&nbsp;&nbsp;In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>

<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
	<tr>
		<td>
			<div class="outer">
				<a href="#">
					<div class="text-top">
						<br>Top text<br><br>
					</div>
					
					<div class="text-img">
						<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
					</div>
					
					<div class="text-bot">
						<br>Bottom text<br><br>
					</div>
				</a>
			</div>
		</td>
	</tr>
</table>
</center>
</body>
</html>

I am trying to acheve a 2 coulumn layout, but I keep getting problems wilt the side-box. I am designing this layout for a system where users can insert content, so I am not sure how much content will be added to the two boxes.

I am trying to show what I want to acheve in a picture-file:

http://www.student.uib.no/~st11920/...out_problem.gif

No matter how I do it I cannot get the surrounding DIV to expand horisontally according to the fixed content DIV's height.

It will gladly expand to the liquid sized one, but the other one wich I have positioned absolute will not affect the surrounding DIV. My guess is that this is the expected result. The HTML is he http://www.student.uib.no/~st11920/...divproblem.html


But my question is how can I do what I want with CSS?

My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time.

goto www.eldore.com

Attached is my css file.

Thanks

O.K. Here is my style sheet code ...

Code:

<style type="text/css">

channel-container
{
background-color:#66FF66;
width:500px;
margin:auto;
clear:both;
}
.channel
{
background-color:#CCFF00;
width:465px;
margin:auto;
}
.channel#
{
background-color:#99CC99;
width:35px;
margin:auto;
}
</style>

and here is some of the html ....


Code:

<div class=channel-container>
<div style=channel>A&E</div>
<div style=channel#>118</div>
</div>
<div class=channel-container>
<div style=channel>ABC Family</div>
<div style=channel#>180</div>
</div>
<div class=channel-container>
<div style=channel>America Live</div>
<div style=channel#>219</div>
</div>
<div class=channel-container>
<div style=channel>Angel One</div>
<div style=channel#>262</div>
</div>
<div class=channel-container>
<div style=channel>Angel Two</div>
<div style=channel#>266</div>
</div>
<div class=channel-container>
<div style=channel>Cartoon Network (East)</div>
<div style=channel#>176</div>
</div>
<div class=channel-container>
<div style=channel>Cartoon Network (West)</div>
<div style=channel#>177</div>
</div>

Now believe me I know this is not aesthetically appealing ... However I am just trying to get a base layout where I have a container I can change the background color on, or alter as I wish in the future. Then I want the channel name to show up, with the channel number in a separate cell .. All easily changable at will through the CSS rule modifications.

Can anyone tell me what it is I am doing wrong here ? I am getting no formatting at all with the code I am using.

Hi

I am using an external stylesheet to try to format some text, but its not working.

This is what is in my stylesheet?

PHP Code:
.small{
font-size: 11px;
font-family: verdana, arial, tahoma;} 





I then used this:

PHP Code:
<span class="small"><font color="#000000">my text</font></span> 





But its not formatting it. Any ideas?