SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Dec 13, 2004, 08:48 #1
- Join Date
- Dec 2004
- Location
- Raleigh, NC
- Posts
- 36
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Center Column Pushed Down in Firefox
Hello,
I am having some issues with a misbehaving center column in Firefox.
Relevant HTML file:
http://charlemagnewebdesigns.com/cus...work/city.html
Relevant CSS files:
http://charlemagnewebdesigns.com/cus...etwork/nav.css
http://charlemagnewebdesigns.com/cus...twork/city.css
http://charlemagnewebdesigns.com/cus...work/login.css
http://charlemagnewebdesigns.com/cus...k/calendar.css
Everything looks fine in IE and Firefox at 800x600 and in IE at 1024x768. However, in FireFox at 1024x768, #centercolumn keeps getting pushed down a good bit. I have tried everything under the sun to get that center column to go up under FF at that resolution, from adjusting height and width properties to trying many different DOCTYPES, but no dice.
As this is a client project whose deadline had already passed, any help with this would be greatly appreciated.
Thanks!
-
Dec 13, 2004, 09:37 #2
- Join Date
- Aug 2004
- Location
- Glendale Heights, IL
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
The reason that your center column has such a large top margin is "clear: both". You're using it in city.css on the "calltoaction" and "cityweatherwrapper" DIVs.
Code:/**********************/ /*** Call To Action ***/ /*********************/ #calltoaction { position: relative; width: auto; clear: both; } /********************/ /*** City/Weather ***/ /********************/ #cityweatherwrapper { width: auto; padding-top: 1em; clear: both; }
Hope this helps!Bamboo Web Solutions - Chicago Custom Website Design
Other: [1]
System: Firefox 1.5.0.1, Gentoo Linux 2.6.15 (Openbox 3.3)
-
Dec 13, 2004, 09:49 #3
- Join Date
- Dec 2004
- Location
- Raleigh, NC
- Posts
- 36
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the quick reply.
Unfortunately, that had no effect on the center column itself. The clear:both is needed under #cityweatherwrapper to make sure that the city name aligns vertically, so that it lines up properly with the weather forecast with is floated right. Although, taking away that clear does not break the site under IE in anyway. It is more a matter of appearance.
The only other thing I can think is that since the weather forecast is stored in IFRAME if the extra pixels that are usually needed to kill off the scrollbar are messing with FF.
Thanks again!
-
Dec 13, 2004, 10:36 #4
- Join Date
- Aug 2004
- Location
- Glendale Heights, IL
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by NosferatusCoffin
Taking away the "clear:both" fixes it on my machine (Firefox 1.0 on Linux). I see what you mean about the need to align the city name and forecast. But... I'd suggest NOT using "clear: both" to do so.
The purpose of "clear: both" is to move an element down below previously floated elements -- which is exactly what it seems to be doing on both your copy of Firefox and mine. I'm confused as to why taking it away doesn't affect the center column in your version of the browser, though.
I snagged a copy of your site, and made the CSS changes I suggested above. I also added a "padding-top: 1em;" to the #weather style in city.css, to align the city name and forecast.
Here's a screenshot of how the site looks in my browser before CSS changes:
http://www.adinkracommunications.com...eindex-old.png
And after the CSS changes I suggested:
http://www.adinkracommunications.com...eindex-new.png
This is the best thing I can think of. If it still doesn't work, maybe someone else will be able to help you. Good luck!Bamboo Web Solutions - Chicago Custom Website Design
Other: [1]
System: Firefox 1.5.0.1, Gentoo Linux 2.6.15 (Openbox 3.3)
-
Dec 13, 2004, 11:43 #5
- Join Date
- Dec 2004
- Location
- Raleigh, NC
- Posts
- 36
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No dice on that.
Thanks for taking the time to look over it, I appreciate that a lot.
Still seems to be the #centercolumn itself that is causing the problem. I changed DOCTYPES a few times after making the edits you suggested, just in case, but no change.
I also tried a few whitespace commands to see if that might clear it up, but nothing there either.
Thanks for suggestion on the clear:both under #wrapper. That at least saves a little code.
-
Dec 13, 2004, 12:55 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The problem is that Firefox 1.0 has taken to clearing all floats above it in the html and not just those in the ssame stacking context. My fix for this is to wrap the content that has the clear statements in a floatwrapper. This confines the clears to inside the float as it can't really clear itself.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>PrideLists.com</title> <style> body { background-color : #FFFFFF; font-size: 9pt; font-family: Arial, sans-serif, helvetica; color:#000000; margin-left : 5%; margin-right : 5%; margin-top : 0; } /************************/ /*** Rail Containers ***/ /***********************/ #wrapper { width: 100%; } #leftcolumn { position: relative; background: #FFFFFF; width: 19%; padding-top: .5em; float: left; } * html #leftcolumn {height:1%} /* for ie only */ #rightcolumn { position: relative; background: #FFFFFF; width: 19%; padding-top: .5em; float: right; } * html #rightcolumn {height:1%} /* for ie only */ #centercolumn { background: #FFFFFF; margin-left: 21%; margin-right: 21%; padding-top: .5em; text-align: justify; } * html #centercolumn {height:1%} /* for ie only */ #centercolumn p { font-size: 9pt; color : black; line-height : 125%; text-align: justify; } #clearfooter { position: relative; margin: 30px auto; } #footer { width: 100%; padding-bottom: 1em; clear: both; } #footer p { line-height : 100%; text-align: center; color: #98208C; } .main { width: 100%; border: .1px #98208C; } .month { background-color: #98208C; font: bold 9px verdana; color: #FFFFFF; } .daysofweek { background-color: #98208C; font:bold 8px verdana; color: #FFFFFF; } .days { font-size: 8px; font-family:verdana; color:black; background-color: #F4EEF4; padding: 2px; } .days #today{ font-weight: bold; color: red; } /*******************/ /*** Login Form ***/ /******************/ #loginform { font-size: 9pt; font-weight: 700; font-family: arial; color: #98208C; text-align: center; } #loginform p { line-height: 100%; text-align: center; font-size: 8pt; font-weight: 700; font-family: arial; } #searchbutton { padding-top: .2em; padding-left: 10px; padding-right: 10px; float: right; } input.purple {background-color: #610958; font-weight: bold; color: white; margin-bottom: 0px; margin-top: 3px;} input.grey {background-color: #E9E9E9; margin-bottom: 0px; margin-top: 3px;} input {font-size: 10px;} /********************/ /*** City/Weather ***/ /********************/ #cityweatherwrapper { width: auto; padding-top: 1em; clear: both; } /*******************/ /*** City Title ***/ /******************/ #citytitle { position: relative; font-size: 18pt; font-family: arial; color: #98208C; font-weight: 700; height: 80px; width: auto; float: left; } /****************/ /*** Weather ***/ /****************/ #weather { position: relative; height: 80px; width: auto; float: right; } /**********************/ /*** Call To Action ***/ /*********************/ #calltoaction { position: relative; width: 100%; clear: both; } /**********************/ /*** Main Body Text ***/ /*********************/ #mainbodytext { position: relative; width: 100%; clear: both; } /*************************************/ /*** Column Navigational Separator ***/ /*************************************/ #navseparator { background: #FFFFFF; height: 10px; } /*************************/ /*** Advertisement Row ***/ /************************/ #adrow { width: 100% text-align: left; font-size: 9pt; font-family: arial; color: #98208C; margin-left: 10%; margin-right: 10%; text-align: center; padding-top: .5em; } /******************/ /*** Separator ***/ /****************/ #separator { height: 2em; } /**************************/ /*** Top of Page Banner ***/ /**************************/ #bannertable { width : 760px; height : 130px; } #logo { position: relative; width : 50%; height : 100%; float : left; background : url(http://charlemagnewebdesigns.com/cus...ork/pllogo.jpg); } #adbanner { position: relative; width : 50%; height : 100%; float : right; background : url(http://charlemagnewebdesigns.com/cus...work/blank.jpg); } #header { position: relative; width: 100%; height: auto; clear: both; } #titlelabels { position: relative; width: 100%; background: url(http://charlemagnewebdesigns.com/cus...te16x16new.gif) repeat; clear: both; } /*****************************/ /*** Top Level Navigation ***/ /***************************/ #nav { white-space : nowrap; background-color : #98208C; float : left; color : White; width : 100%; border-style : solid; border-color : #98208C; border-width : 1px 0 1px 0; } #nav ul { padding : 0; margin : 0; float : left; } #nav ul li { display : inline; } #nav ul li a { padding-left : 1em; padding-right : 1em; background-color : #98208C; color : White; font-weight : 700; text-decoration : none; float : left; border-right-color : #FFFFFF; border-right-style : solid; border-right-width : 1px; } #nav ul li a:hover { background-color : #98208C; color : #DDBBDD; } /*****************************/ /*** Date/Member Container ***/ /****************************/ #datememberblock { position: relative; height: 20px; background: #F4EEF4; font-weight: 700; color: #98208C; width: 100%; padding-top: .2em; float: right; } /********************/ /*** Member Block ***/ /********************/ #memberblock { position: relative; float: left; padding-left: 10px; } /*******************/ /*** Date Block ***/ /******************/ #dateblock { position: relative; float: right; padding-right: 10px; } /***************************/ /*** Navigational Labels ***/ /**************************/ #navlabelblock { position: relative; width: 100%; font-size: 9pt; font-family: arial; color: white; font-weight: 700; height: 18px; text-align: center; padding-top: .1em; background: url(http://charlemagnewebdesigns.com/cus...prite20x20.gif) repeat; clear: both; } /**************************/ /*** Navigational Text ***/ /*************************/ #navlabeltext { position: relative; background: #FFFFFF; width: 100%; font-size: 8.5pt; font-family: arial; color: #98208C; font-weight: 600; height: 20px; text-align: left; padding-left: 15px; padding-top: .2em; padding-top: .2em; } #navlabeltext a:hover{ text-decoration: none; background-color : #98208C; color : #FFFFFF; } /***************************************/ /*** Columned Navigational Separator ***/ /***************************************/ #separator { background: #FFFFFF; height: 0em; clear: both; } /**********************************/ /*** Links Appearance Behavior ***/ /*********************************/ a:link { color: #98208C; text-decoration : none; } a:active { color: #98208C; text-decoration : none; } a:visited { color: #98208C; text-decoration : none; } a:hover { text-decoration : none; color: #98208C; font-weight: 700; } html>body #innercentre {width:99.9%;float:left;} </style> <script type="text/javascript" src="basiccalendar.js"> </script> </head> <body> <!----------------> <!---Start Logo---> <!----------------> <div id="bannertable"> <div id="logo"> </div> <div id="adbanner"> </div> </div> <!--------------> <!---End Logo---> <!--------------> <!---Start Header---> <div id="header"> <!------------------------------> <!---Start Topside Navigation---> <!------------------------------> <!--- Insert Navigation Button Labels ---> <div id="nav"> <ul> <li><a href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">Login</a></li> <li><a href="javascript:void(0)">My Account</a></li> <li><a href="javascript:void(0)">Register</a></li> <li><a href="javascript:void(0)">Contact Us</a></li> <li><a href="javascript:void(0)">Help</a></li> </ul> </div> <!----------------------------> <!---End Topside Navigation---> <!----------------------------> </div> <!---End Header---> <!--- Start Weclome and Date Text---> <div id="datememberblock"> <div id="memberblock"> Welcome </div> <div id="dateblock"> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- Begin var months=new Array(13); months[1]="January"; months[2]="February"; months[3]="March"; months[4]="April"; months[5]="May"; months[6]="June"; months[7]="July"; months[8]="August"; months[9]="September"; months[10]="October"; months[11]="November"; months[12]="December"; var time=new Date(); var lmonth=months[time.getMonth() + 1]; var date=time.getDate(); var year=time.getYear(); if (year < 2000) year = year + 1900; document.write(lmonth + " "); document.write(date + ", " + year); // End --> </SCRIPT> </div> </div> <!--- End Weclome and Date Text---> <!--------------------------> <!--- Start Main Content ---> <!--------------------------> <div id="wrapper"> <!--- Start Left Column Content ---> <div id="leftcolumn"> <!--- Show Calendar ---> <div id="navlabelblock"> Calendar </div> <script type="text/javascript"> var todaydate=new Date() var curmonth=todaydate.getMonth()+1 //get current month (1-12) var curyear=todaydate.getFullYear() //get current year document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script> <!--- End Calendar ---> </div> <!--- End Left Column Content ---> <!--- Start Right Column Content ---> <div id="rightcolumn"> <div id="navlabelblock"> Login </div> <!--- Start Login Form ---> <div id="loginform"> <form style="margin-bottom: 0px; margin-top: 3px;"> Username <input class="grey" type="text" name="username" size="15"> Password <input class="grey" type="text" name="password" size="15"> <input class="purple" type="submit" value="Submit" name="B1"> </form> <p class="loginform"> <a href="javascript:void(0)">Forget Password?</a> </p> </div> <!--- End Login Form ---> <div id="separator"> </div> <!--- Start Google Advertising ---> <div id="navlabelblock"> Advertising </div> <div id="adrow"> Google-type Advertising can go here </div> <!--- End Google Advertising ---> </div> <!--- End Right Column Content ---> <!--- Start Center Column Content ---> <div id="centercolumn"> <div id="innercentre"> <!--- Start Call To Action ---> <div id="calltoaction"> <div id="navlabelblock"> Call To Action </div> <!--------------------------------------> <!---Start Call To Action Navigation---> <!--------------------------------------> <div id="nav"> <ul> <li><a href="javascript:void(0)">Events</a></li> <li><a href="javascript:void(0)">Reviews</a></li> <li><a href="javascript:void(0)">Fourms</a></li> <li><a href="javascript:void(0)">Marketplace</a></li> </ul> </div> <!--------------------------------------> <!--- End Call To Action Navigation ---> <!--------------------------------------> </div> <!--- End Call To Action ---> <!--- Start City/Weather Wrapper ---> <div id="cityweatherwrapper"> <!--- Show City Name ---> <div id="citytitle"> Chicago </div> <!--- Show Weather ---> <div id="weather"> <nolayer> <IFRAME SRC="http://www.superpages.com/cities/con...LZ014&W=220x70" MARGINWIDTH="0" MARGINHEIGHT="0" WIDTH="220" HEIGHT="70" HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no"> <a href="http://www.superpages.com/cities/weatherforecasts.html"> <img src="http://img.superpages.com/cities/wea...ns/console.gif" border=0 alt="SuperPages.com Weather for Chicago IL"> <br> Weather Forecasts </a> </IFRAME> </nolayer> <br> <ilayer id="con" visibility="hide" width="220" height="70"> </ilayer> <br> <layer onload="moveToAbsolute(con.pageX, con.pageY); visibility='show';" visibility="hide" width="220" height="70" clip="220,70" src="<A href="http://www.superpages.com/cities/console.pl?T=Chicago&S=IL&filename=Chicago-weather-IL.html&Z=ILZ014&W=220x70"></layer">http://www.superpages.com/cities/console.pl?T=Chicago&S=IL&filename=Chicago-weather-IL.html&Z=ILZ014&W=220x70"></layer> </div> <!--- End Weather ---> </div> <!--- End City/Weather Wrapper ---> <div id="mainbodytext"> Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text </div> </div> <!--- End Center Column Content ---> </div> </div> <!-----------------------> <!--- End Main Content---> <!-----------------------> <!--------------> <!--- Footer ---> <!--------------> <br style="clear:both" /> <div id="footer"> <p class="footer"> Copyright 2004 - PrideLists.com - All Rights Reserved </p> </div> </body> </html>
Paul
-
Dec 13, 2004, 13:11 #7
- Join Date
- Dec 2004
- Location
- Raleigh, NC
- Posts
- 36
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul, you are a lifesaver! Thanks a ton! This one very annoying problem has been bugging me for days!
Thanks again!
Bookmarks