...

View Full Version : FireFox issue with CSS.



Permutant
09-14-2007, 10:15 AM
Can anybody help me. Why does this work in IE6 and IE7 and not in firefox is it not really CSS compliant?



<head runat="server">
<title>Untitled Page</title>
<style type='text/css'>
.haqrb
{
float:left;
}
.haqa
{
float:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
<div style="float:left;">
<div style="float:left; text-align:right; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div style="clear:both;"></div>
<div style="float:left">Left</div>Right
</div>
</div>
</form>
</body>


This is what the code should look like.
http://www.netpoweron.com/images/workingIE7.gif

But in FireFox the words "Left" and "Right" are put together on the left of the div. When they should be text-aligned RIGHT!

Thanks,
Darren

timgolding
09-14-2007, 12:48 PM
Firefox is CSS compliant, far more so than IE (which makes a mess of things)

I always say design on FireFox and hack for IE

It seems the reason that Firefox isn't doing as you require is because this is invalid code.

You should put the left aligned and right aligned text into different divs and then have one as right aligned and one as left. You must make sure your boxes aren't clearing.



<html>
<head>
<style>
.right_aligned
{
float:right;
clear:none;
text-align:right;

}

.left_aligned
{
float:left;
clear:none;
text-align:left;

}
</style>
</head>
<body>
<div style="width:500px; float:left; border:1px solid blue;">
<div class="left_aligned" >

Left
</div>

<div class="right_aligned">
Right
</div>
</div>
</body>
</html>


PS if all sides of the box are the same solid and blue then you only need one line in your CSS as shown below.

use:


border:1px solid blue;



instead of:


border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;

ahallicks
09-14-2007, 01:02 PM
I'd probably put those left and right floated elements in to spans rather than divs to keep them as inline. Also, to the thread starter, you don't need to float text left to get it to align next to each other. Text automatically positions inline until it reaches a set width or is given an HTML rule to create a line-break or block.

(Also, don't forget the doctype, which Tim didn't put into his example code out of laziness :p)

Permutant
09-14-2007, 10:07 PM
Thank you for your suggestions. So I changed the code to use a <span> float left and a <span> float right, but then I've actually tried that before and this is the result. ( I omitted the DOCTYPE for brevity )



<head>
<style type='text/css'>
.haqrb
{
float:left;
}
.haqa
{
float:left;
}
</style>
</head>
<body>
<form id="form1">
<div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
<div style="float:left;">
<div style="float:left; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div class="haqrb">Text</div>
<div style="clear:both;"></div>
<span style="float:left">Left</span><span style="float:right">Right</span>
</div>
</div>
</form>
</body>
</html>


http://www.netpoweron.com/images/notworkingie7.gif

On Firefox it would even wrap to the next line so the box would be displayed one above and one below. I would like the blue box to maintain the size of the "texttexttext" stuff. But when I float right it will take up the entire space on the browser. But I don't know how wide the texttexttext stuff is going to be so I can't set it in pixels. Any ideas?

Thanks,
Darren

Permutant
09-15-2007, 06:56 PM
Ok here is a solution I could live with. Thank you for your suggestions because they helped me come to this one. Get rid of the DIVs for Spans and then centre horizontally which is OK. It works in Firefox as well. :D

The Green and Blue Borders are just for refrence and yeah I could have just used border:. The design program I use does that.



<head>
<style type='text/css'>
.haqa
{
float:left;
}
</style>
</head>
<body>
<form id="form1">
<div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
<div style="float:left;width:309px;">
<div style="text-align:center; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span class="haqrb">Text2</span>
<span style="float:left">Left</span><span style="float:right">Right</span>
</div>
</div>
</form>
</body>
</html>

timgolding
09-20-2007, 05:48 PM
Good! however you should sort your CSS out as suggested



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum