Forum Moderators: not2easy
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]
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
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?
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
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!
<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]
