homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
difference appearance in mozilla FF3 and IE
Need Urgent Help!
pritesh

5+ Year Member



 
Msg#: 3738020 posted 5:42 am on Sep 4, 2008 (gmt 0)

hi friends...
I am designing a site <>

problem is that when I am using IE then every control are at their
appropriate place but for mozila (new version..I have downloaded last day),it is not showing the my banner(logo) image appropriatly.
please check it in new mozila browser....even in the old mozila,it is showing correctly but for new mozila banner image width is reduced to almost its half length while image is 1400 wide.

please help me....
thanks for any help in advance

[edited by: SuzyUK at 9:54 am (utc) on Sep. 4, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3738020 posted 5:57 am on Sep 4, 2008 (gmt 0)

Welcome to WebmasterWorld pritesh.

On a note, links are not allowed and a moderator will remove it.

I did take a quick look at the page and your banner is dynamic so it could be the screen resolution of the browser. Resize IE and your old Mozilla browser and see if it is what you are experiencing in the new browser.

Marshall

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3738020 posted 9:47 am on Sep 4, 2008 (gmt 0)

With links we never know if you changed things or not in the mean time, so please post (minimal) code instead of links.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3738020 posted 10:25 am on Sep 4, 2008 (gmt 0)

Welcome Pritesh

as as been mentioned, no links please and just the sample code would help

BUT:
I tried to help by isolating the code to post here but once I did the "bug" wasn't there so.. that suggests a conflict/mistake/bug, so I'm breaking some rules and will have a further look because it certainly *appears* as if FF3 is doing something wrong

FF3 has to stay innocent until proven guilty so give us a bit of time.. does anyone know of any FF3 CSS rendering issues?

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3738020 posted 10:39 am on Sep 4, 2008 (gmt 0)

I did look at it in FF3 and safari, looked exactly the same.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3738020 posted 11:21 am on Sep 4, 2008 (gmt 0)

yes with the shrunk logo, swa? same in Opera.. so it seems it's FF2 that's got it wrong and so has IE, but that's no surprise

here's the minimum code to reproduce:
<!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>Forum Home Page</title>
<style type="text/css" media="screen">
body {
margin:20px 40px;
font-size:0.9em;
font-family: "Arial"," Times New Roman" ;
font-size:14px;
border:1px solid #000;
background: #ccc;
}

#main {
/*width: 100%;*/
float:left;
background: #fff;
}

#logo {
background: #78ce31;
}

#logo_text {
float:right;
width:200px;
height:80px;
background-color:#70c32e;
margin:40px 20px 53px 0;
font-family: Tahoma, Arial;
font-size:20px;
color:#fff;
padding:10px;
font-weight:bold;
}
#menu {
background:#70c32e;
height:21px;
width:600px;
margin: 0 auto;
clear:both;
border:1px solid #a8f534;
text-align:center;
color:#fff;
padding-top:4px;
}
</style>
</head>
<body>

<div id="main">
<div id="logo">
<div id="logo_text">Logo Text</div>
<div id="menu">menu links</div>
</div>
</div>
</body>
</html>

Pritesh.. the code to fix is quite easy just add a width (100%) to the #main div.. when you float a div without a width it is supposed to shrinkwrap around it's content.

in your case the menu set to 600px is the widest element inside the main div so the logo div is also getting the 600px width..

the question is why was FF2/IE giving the 100% (page) width.. I dunno but it's got something to do with the right floated logo_text - unfloat it and both IE and FF2 shrink too.. which is what they should do maybe there's a subtle change in the float specs?

anyway width on the #main float should cure your woes

pritesh

5+ Year Member



 
Msg#: 3738020 posted 12:08 pm on Sep 4, 2008 (gmt 0)

First of all sorry for posting links...(As I am new here)
It works....

Thanks all(specially SuzyUK for code) for your sincere help...
Before this I was trying to use javascript to detect browser version and adjusting the size..
but your help is much better....
Thanks a lot....for your help!

pritesh

5+ Year Member



 
Msg#: 3738020 posted 12:41 pm on Sep 4, 2008 (gmt 0)

Thanks for solving my problem....
One more thing I want to know...
I want to place login control in middle of the page...
I don't want to use &nbsp; as this will behave diffently in
differnt monitor size...and since it is login control so text-align will also not work here...
please help me for this topic also..
Thanks in advance......

csuguy

5+ Year Member



 
Msg#: 3738020 posted 1:54 pm on Sep 4, 2008 (gmt 0)

if you want to completely center the login control - use an absolutely positioned table inside of your container div (assuming you have one). For example:


<div id="container">
<table id="login_container">
<tr><td>
<div id="login">
<!-- Put login stuff here! -->
</div>
</td></tr>
</table>

<div id="header"></div>
<div id="links"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

For the CSS:


/*IE centering - using Holy Hack*/
* html body
{
text-align:center;
}

#container
{
position:relative;
width:800px; /*You can get by w/o specifying this I think if you don't want*/
margin: auto;
text-align:left; /*undo the above for internal text*/
}

#login_container
{
position:absolute;
width:100%;
height:100%;
vertical-align:center;
}

#login
{
width: #px; /*specify the width so that it doesn't automatically span the entire width*/
}


Hope that helps!
Ryan

[edited by: SuzyUK at 2:00 pm (utc) on Sep. 4, 2008]
[edit reason] fixed formatting [/edit]

csuguy

5+ Year Member



 
Msg#: 3738020 posted 1:55 pm on Sep 4, 2008 (gmt 0)

actually - switch the position of the table and the other divs, it should come last I think.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved