Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: not2easy

Message Too Old, No Replies

difference appearance in mozilla FF3 and IE

Need Urgent Help!

     
5:42 am on Sep 4, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 4, 2008
posts:6
votes: 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]

5:57 am on Sept 4, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2144
votes: 7


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

9:47 am on Sept 4, 2008 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


With links we never know if you changed things or not in the mean time, so please post (minimal) code instead of links.
10:25 am on Sept 4, 2008 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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?

10:39 am on Sept 4, 2008 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


I did look at it in FF3 and safari, looked exactly the same.
11:21 am on Sept 4, 2008 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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

12:08 pm on Sept 4, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 4, 2008
posts:6
votes: 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!

12:41 pm on Sept 4, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 4, 2008
posts:6
votes: 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......
1:54 pm on Sept 4, 2008 (gmt 0)

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 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]

1:55 pm on Sept 4, 2008 (gmt 0)

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members