Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi there.
I am a little confused about what's going on.
the css is as:
<style type="text/css">
body
{
direction: rtl;
padding: 0;
margin: 0;
background-color: #1F3243;
padding-bottom: 20px;
}
div.command
{
padding: 5px;
width: 930px;
margin-bottom: 5px;
background-color: #6699FF;
}
div.command div.item
{
background-color: #FFFFFF;
padding: 2px;
width: 70px;
float: right;
margin-left: 75px;
margin-right: 75px;
font-size: 18pt;
cursor:pointer;
}
div.command div.item:hover
{
background-color: #FFFFFF;
padding: 2px;
width: 70px;
float: right;
margin-left: 75px;
margin-right: 75px;
filter: Alpha(Opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
cursor:pointer;
}
</style>
and the html is as:
<body>
<div class="command">
<div style="width: 100%">
<div class="item">
a
</div>
<div class="item">
b
</div>
<div class="item">
c
</div>
<div class="item">
d
</div>
</div>
</div>
</body>
It looks as it should in IE7 but in FF3 it's just a mess.
Any idea -
First of all, a pointer for future reference: never (NEVER) develop your site for IE first. Seriously. If you're looking back at it saying to yourself "well, it looks OK in IE, but in all these other standards-compliant browsers, it looks all screwy", you know it's your coding that's backwards and at fault, not a browser's.
-
I agree with Tetsuo completely. WIth that said, do you have a link for us to try and help?
-
Sorry guys but this is part of intranet web app for a large company whose default browser is IE7.and recently they have made a decision to put the app on net and before this happens I should fix it.I'll put the sample html page for you.thanks
-
It seems that there's no way to put the whole html page.
just test this block in both IE7 and FF3:
<div style="padding: 5px;
width: 930px;
margin-bottom: 5px;
background-color: #6699FF;">
<div style="background-color: #00FF00;
padding: 2px; width: 70px; float: right; margin-left: 75px;
margin-right: 70px; font-size: 18pt; cursor: pointer;">
Some inner html
</div>
</div>
thanks again -
- CommentAuthorashley.kay
- CommentTimeJan 26th 2009
Hi,
It's to do with the floating elements and not clearing them properly... take a read of this...
http://www.quirksmode.org/css/clearing.html
There are two ways you can solve this... adding a clear div as the last thing inside the command div, or a more modern solution is adding the styles overflow:auto; height:100%; to the command div...
HTML
<body>
<div class="command">
<div style="width: 100%">
<div class="item">
a
</div>
<div class="item">
b
</div>
<div class="item">
c
</div>
<div class="item">
d
</div>
</div>
</div>
</body>
CSS
<style type="text/css">
body
{
direction: rtl;
padding: 0;
margin: 0;
background-color: #1F3243;
padding-bottom: 20px;
}
div.command
{
padding: 5px;
width: 930px;
margin-bottom: 5px;
background-color: #6699FF;
overflow:auto;
height:100%;
}
div.command div.item
{
background-color: #FFFFFF;
padding: 2px;
width: 70px;
float: right;
margin-left: 75px;
margin-right: 75px;
font-size: 18pt;
cursor:pointer;
}
div.command div.item:hover
{
background-color: #FFFFFF;
padding: 2px;
width: 70px;
float: right;
margin-left: 75px;
margin-right: 75px;
filter: Alpha(Opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
cursor:pointer;
}
</style>
If you have time, i'd also recommend you try to cut out the <div style="width: 100%">... it's unnessesary html...
Hope this helps,
Ashley -
Hi Ashley and thanks a lot.
It worked out and I do appreciate that.
But how is it possible,Good in IE7 Mess in FF3.Why is it shown as I wanted on IE7 and but on FF3????
1 to 7 of 7