CSS - Problems In Firefox When Floating <dt> And <dd> Elements

Hello.

I spoke with some css developers yesterday on IRC but they failed to fix the problem. They suggested me to ask here for help so I will.

I am currently making a new homepage and this is my page; mg-s.org/newly/

I had to edit most of the .css because the page was "floating". Like, some people couldn't see everything and if we zoomed in or out then the page got messed up..

So here is the current progress: mg-s.org/newly/ which is messed up.

It's supposed to look like this:
pokit.org/get/?00e5090c7ab5a0972f325bb16608f6fb.jpg

But as you can see it's not.

Here is the style.css : pastebin.com/BPrfZuBd
Here is the index.php : pastebin.com/BDQKcxCE

I am not that familiar with css so I need help. I've already editing on the size in the .css like on "top" to fix the #panel so it goes futher up but it's not working. Same with the #rightmenu

I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem.

For whatever reason, the main content has been floating slightly below my sidebar.

Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs."

wendyhenrichs (dot) com (slash) pin.

If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar):

http:// www . wendyhenrichs . com / pin

Please just take a quick look.

Thanks!

i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

i've got a page that basically follows this order:
-header (h1)
-4 main menu blocks (div-ul-li-a)
-firefox plug (h3)
-main content container (div)
----... (small bit of irrelevant content)
----google adsense block (p)
----entry container (div)
-------entries (div-h4-ul-li)
----end entry container (/div)
-end main content container (/div)
-4 less-relevant menu blocks (div-ul-li-a)
-footer (hr-p)

if that's confusing to you, check out the source code he URL

anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL

==stipulations==
-i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
-i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

==source code==
working xhtml (veiw source) - URL
working css - URL
current xhtml (veiw source) - URL
current css - URL
if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)


a HUGE thank-you to anybody willing to help me!!

I am pretty much a css newbie, but I get everything that I have learned so far. The only problem I have is understanding how floating for layout works.

I want to create a 3 column layout, with the nav menu on the left, content in the middle, and sidebar on the right. I just can't get them to align where I want them to. How would I go about in doing this?

I have followed many tutorials and tried doing it on my own, and just can't get it right. I've tried various methods such as floating left and right, clearing left and right, padding, added width and negative margins. It's really frustrating.

Can someone please help me out? Thanks in advance!

I'm new to wordpress and have coded with CSS before but this is doing my nut in! So any help would be very helpful

I'm changing and existing template to suit a customer. I have 3 images as the header to the page on float left and the other right, the 3rd is in the center. In firefox and every other normal browser its displaying correctly, rounded corners etc. but in IE the main bit of the page is below the floated images and i cannot seem to make the clear:none hack in IE work.

the site is occasionsbyjennifer .co .uk (wouldn't let me add a url)

If you can have a look and suggest some ideas to try as i'm bleeding fed up with this. and because i haven't coded the full site etc i think i must be missing something obvious.

thanks.

Hi there!

I'm using this code:
CSS:
Code:

#content {
margin-top: 75px;
width: 597px;
height: auto;
}

#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}

#right {
width: 485px;
height: 100px;
}

HTML:
Code:

<div id="content">
<div id="left">
&nbsp;
</div>
<div id="right">
&nbsp;
</div>
</div>

---------

But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help.

URL

Basically I have some body text with a sidebar, and a colored box within the body text. If the body box is below the sidebar, I want it to stretch to the width of the page.

below sidebar

If the body box is beside the sidebar, I don't want it to touch the sidebar (for whatever reason, the background will touch it but not the text). What I want is illustrated he

not touching

I've currently accomplished this by floating the sidebar to the right, floating the body box to the left, and clearing the float after the body box. This works great in Internet Explorer, but in Firefox and Opera, the body box is always placed below the sidebar:

Firefox view

I can accomplish what I want by using tables, but obviously I'd like to avoid that. Is there a cross browser way to get what I want?

Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions.

This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin.

The page and the CSS all validates fine.

<div id="main">
<div id="leftdiv" class="floatleft"> <p class="bold">Do you...
</p></div>
<div id="rightdiv" class="floatright"> <p class="bold right">Would you </p>
</div>
</div>

#main {
position: absolute;
height: 70%;
width: 70%;
left: 5%;
top: 100px;
overflow: auto;
}

#leftdiv {
position:relative;
margin-left: -109px;
top: 50%;
margin-top: -160px;
left: 20%;
width: 198px;
height: 299px;
padding: 10px;
}

#rightdiv {
position:relative;
top: 50%;
margin-top: -160px;
right: 20%;
margin-right: -109px;
width: 198px;
height: 299px;
padding: 10px;
}

.floatleft {float:left;}
.floatright {float:right; }

I dont know what I am doing wrong. I checked one of the online templates and actually I got the idea from an online template. I want to float columnist image to left, short text to right with these codes. It appears fine at ie but in firefox text appears line under image. Here; http://www.pearl.ru/isdunyasi


#maincontentcolumns {
float:left;
margin-right:2px;
width:598px;
height:150px;
background:#FFFFFF url(images/innerheadline_bg.gif) top no-repeat;
}
#maincontentcolumns h1 {
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
#maincontentcolumns .c {
float:left;
margin:0px 2px 0px 2px;
width:292px;
height:80px;
}
#maincontentcolumns .c img {
float:left;
position:relative;
height:80px;
width:80px;
padding:2px;
}
#maincontentcolumns .c p {
float:right;
padding:2px;
margin:0;
font-size:14px;
}



PS: This is my last working with ie not with firefox message. I started testing with firefox. When it works with firefox it surely works with ie.

I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image.

Can someone help me fix my code to align this properly?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
     <div id="navigation" class="menu">
     	<ul id="top-nav">
        	<li class="item4"><a href="#" title="Contact">Contact</a></li>
		<li class="item3"><a href="#" title="About">About</a></li>
		<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
                <li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
       </ul>
     </div>
     <div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
     <div class="clear"></div>
<!-- end #header --></div>
  <div id="mainContent"><h1 class="typeface-js">Main Content </h1>
    <div class="typeface-js">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
    </div>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>na design inc, new york  ::  all right reserved 2010</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS CODE:

Code:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
.oneColFixCtrHdr #container {
	width: 800px;
	background-image: url(images/bg-stripe.png);
	background-repeat: repeat;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left; 
}
.oneColFixCtrHdr #header { 
	padding: 10px 10px 0 10px;
	background: #000000;
}
.oneColFixCtrHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
	padding: 0 10px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background: #000000;
	font-family: "Courier New", Courier, monospace;
	font-style: italic;
	font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.typeface-js {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	color: #FFFFFF;
}
#logo {
	display: inline;
	float: right;
	text-align: left;
}
#logo a{
	background-attachment: initial;
	background-clip: initial;
	background-color: initial;
	background-image: url(images/logo.png);
	background-origin: initial;
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	display: block;
	height: 118px;
	margin-bottom: 10px;
	text-indent: -9000px;
	width: 296px;
}
.msie #blog-title a {
	margin-bottom: -10px;
	position: relative;
}
#navigation {
	background-image: url(images/bg-nav.png);
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	float: right;
	height: 22px;
	width: 474px;
	margin-top: 75px;
}
#navigation ul {
}
#navigation li {
	float: right;
	height: 22px;
	position: relative;
	list-style: none;
}
#navigation li a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li a:hover {
	background-image: url(images/bg-nav-btn.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
#navigation li.item1 a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn1.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li.item1 a:hover {
	background-image: url(images/bg-nav-btn1.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

Example of problem
If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg

URL

The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box.

I'm new to inserting code, but I'll give it a try:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN"
    

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>linking to style sheets 2</title>

<style type="text/css">

body {
background-color: #ccccff;

}

h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}

p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}

.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}

.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}

.wrapper {
width: 800px;
background-color: #ff0000;
}

.end {
clear: both;
}

</style>

</head>

<body>

<div class="wrapper">

<div class="leftbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="rightbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="end"></div>

</div>


</body>

</html>

You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help?

P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes

i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;")

in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line

in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc

any thoughts or anything that could help would be apprciated...

regards

my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long.

im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell.

one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image.

does anyone have a solution to either of these 2 problems?


css:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<img src="backgroundfire2.gif" alt="background image" id="bg" />

<table border="1" class="introlayout">
<tr>
<td class="introtitle">

<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />

</td>
</tr>
<tr>
<td class="skillpics">

<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />

</td>
</tr>
<td class="skilltext">

<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />

</td>
</tr>
<td class="menu">

<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />

</td>
</tr>
</table> 
</body>
</html>

html:

Code:

html, body 
{
height: 100%;
margin: 0;
padding: 0;
}

img#bg 
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}

img#titleimg 
{
width:100%;
}

img#mainmenuimg 
{
text-align:center;
width:30%;
}

img#analogskillsimg 
{
width:40%;
height:60%;
}

img#programmingimg 
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}

img#analogskillstext 
{
vertical-align:bottom;
width:40%;
}

img#programmingtext
{
float:right
width:40%;
}

table.introlayout
{
width:100%;
height:100%;
}

td.introtitle
{
width:100%;
height:10%;
}

td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}

td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}

td.menu
{
text-align:center;
width:100%;
height:10%;
}

Interesting situation i have.

In my css i have this declared
Code:
css

a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; } 

a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; } 

div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }

For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global.

However, in firefox, they all inherit the traits from the #buenprov_content

Even links not inside divs with that ID....
as shown: Here ( The ones in the fading content should be a different color )

Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help?

Thanks.

I have a site that adds dynamic elements. The problem is that IE does not like to style dynamic elements for some reason. Does anyone know a fix for this?

Here is a simple example of what I am talking about:
Code:

<html>
<head>
<script language="javascript">
function addSpan()
{
rndNum = Math.round(Math.random()*3);
if(rndNum==0)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "a");
newSpan.innerHTML = "Blue italic Times";
document.appendChild(newSpan);
}
if(rndNum==1)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "b");
newSpan.innerHTML = "Red bold Arial";
document.appendChild(newSpan);
}
if(rndNum==2)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "c");
newSpan.innerHTML = "Yellow underline Tahoma";
document.appendChild(newSpan);
}
</script>

<style>
.a
{
 font-family:Times;
 color:'blue';
 font-style:italic;
}
.b
{
 font-family:Arial;
 color:'red';
 font-style:bold;
}
.c
{
 font-family:Tahoma;
 color:'yellow';
 font-style:underline;
}
</style>
</head>
<body>
<input type="button" value="Add Random Span" onClick="addSpan()"/>
</html>

The styles work in Chrome and Firefox, but not IE

Any help is greatly appreciated. Thanks.