SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Sep 7, 2004, 21:58 #1
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Large gap in Firefox and IE. help quck
Sorry for the rush guys, I just have a deadline tommorow and I am in a hurry.
On this page, http://magichour.biz/rough/vows.php I have the image containers floated left. I added
<div style="clear: both;"></div>
<br clear="all" />
To make it so I could put information underneath the images.
Well, I added a paragraph, but for some reason it gets thrown to the bottom of the content area. Then, in IE, I get that nasty page refresh issue where there is a huge breaking white space if you scroll the page at all.
Any help?
Thanks
Bryan
-
Sep 8, 2004, 05:12 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The problem when you clear a float is that some browsers will clear all previous floats in the document. The solution is usually to enclose the content in a float itselkf and that seems to contain the context of the clear (in most browsers).
Heres an example with your code although I haven't dotted all the i's and crossed the t's as my main computer has just died on me
Code:<!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>Our Current Vows Samples - Magic Hour Productions Inc.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="" /> <script type="text/javascript" src="http://magichour.biz/rough/js/w.js"></script> <style type="text/css"> /* CSS Document */ body { font-size: 1em; font-family: Geneva, Arial, Helvetica, sans-serif; color: #A88699; background-color: #FCF3F3; } div#header { background-repeat: no-repeat; margin: 0px; padding: 0px; height: 148px; width: 754px; background-image: url(http://magichour.biz/rough/images/header-left.jpg); } div#header h1 { display: none; position: absolute; top: -400px; } div#nn4 { display: none; margin: 0px; padding: 0px; } div#innerbody { margin: 0px auto; padding: 0px; width: 754px; border-top-width: 10px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EFCFDA; border-right-color: #EFCFDA; border-bottom-color: #EFCFDA; border-left-color: #EFCFDA; text-align: left; border-bottom-width: 1px; background-color: #FFFFFF; } div#tabs { margin: 0; clear: right; padding: 0px 0px 0px 15px; } ul#navtabs { list-style: none; margin: 0px; padding: 0px; } ul#navtabs li { display: block; float: left; height: 24px; width: 102px; text-align: center; padding: 0px; margin: 0px; background: url(http://magichour.biz/rough/images/off-tab.jpg) no-repeat; } ul#navtabs a:link, ul#navtabs a:visited { display: block; font: bold 70% Verdana, Arial, Helvetica, sans-serif; color: #9B6A78; text-decoration: none; height: 24px; width: 102px; padding: 3px 1px 2px; margin: 0px; } ul#navtabs a:hover { text-decoration: underline; } div#container { text-align: center; } div#content { padding: 5px 0px 5px 15px; margin-top: 40px; font-size: 80%; line-height: 19px; text-align: left; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .roundcont { width: 250px; background-color: #F2F5FB; color: #5179A2; font-size: 100%; } .roundtop { background: url(http://magichour.biz/rough/images/topright-blue.gif) no-repeat right top; } .roundbottom { background: url(http://magichour.biz/rough/images/bottomright-blue.gif) no-repeat right top; } img.corner { width: 14px; height: 14px; border: none; display: block !important; } div#rightside { margin: 0px 25px 25px; padding: 0px 0px 0px 20px; float: right; width: 150px; display:inline;/* ie fix*/ } div#rightside2 { margin: 0px 25px 25px; padding: 0px 0px 0px 20px; float: right; width: 150px; display:inline;/* ie fix*/ } div#rightside p { margin: 5px 10px; } div#rightside2 p { margin: 5px 10px; } div#leftside { margin-right: 230px; margin-left: 0px; } * html div#leftside {height:1%} #leftinner{width:100%;float:left} div#leftside ul { margin-right: 10px; } div#leftside2 { margin-right: 230px; margin-left: 0px; background-color: #F8F4F5; border: 1px solid #F0D5DF; font-size: 110%; } div#leftside p, div#leftside2 p { margin: 10px; padding-bottom: 10px; } div#leftside a:link, div#leftside a:visited, div#leftside2 a:link, div#leftside2 a:visited { color: #9B6086; text-decoration: underline; font-weight: bold; } div#leftside a:hover, div#leftside2 a:hover { color: #AA83AF; } div#footer { background-repeat: no-repeat; margin: 0px; padding: 3px 0px 0px; height: 21px; width: 756px; text-align: center; font-size: 70%; background-image: url(http://magichour.biz/rough/images/footer.jpg); } div#wrap { text-align: left; width: 754px; margin-right: auto; margin-left: auto; } .roundcont2 { background-color: #F8F4F5; font-size: 110%; } .roundtop2 { background: url(http://magichour.biz/rough/images/topright.gif) no-repeat right top; } .roundbottom2 { background: url(http://magichour.biz/rough/images/bottomright.gif) no-repeat right top; } .roundcont3 { background-color: #F8F4FB; margin-top: 30px; } .roundtop3 { background: url(http://magichour.biz/rough/images/topright-purple.gif) no-repeat right top; } .roundbottom3 { background: url(http://magichour.biz/rough/images/bo...ght-purple.gif) no-repeat right top; } div#content h2 { margin-bottom: 20px; font-size: 140%; font-weight: bold; background-repeat: no-repeat; padding: 3px; background-image: url(http://magichour.biz/rough/images/h2gradient.jpg); } div.specials { font-size: 130%; font-weight: bold; color: #394F71; text-align: center; margin-right: 5px; margin-left: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DCE2E9; padding-bottom: 3px; font-family: Geneva, Arial, Helvetica, sans-serif; } div.advertisements { font-size: 130%; font-weight: bold; color: #7E5485; text-align: center; margin-right: 5px; margin-left: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #D8CCDD; padding-bottom: 3px; font-family: Geneva, Arial, Helvetica, sans-serif; } div#rightside a:link, div#rightside a:visited, div#rightside2 a:link, div#rightside2 a:visited { color: #003366; text-decoration: underline; } div#rightside a:hover, div#rightside2 a:hover { color: #7D99C1; } div#quotes { clear:both; margin-right: 140px; margin-left: 140px; margin-top: 10px; margin-bottom: 25px; border-top-width: 4px; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; border-top-color: #FED8EA; border-bottom-color: #FED8EA; font-weight: bold; font-size: 80%; background-color: #FFFBFB; padding: 10px 5px 5px; line-height: 20px; font-family: Geneva, Arial, Helvetica, sans-serif; } div.quoteby { font-weight: normal; text-align: right; padding-right: 10px; padding-top: 10px; } .floatright { float: right; } div#quotes h3 { font-size: 140%; color: #7E6763; margin: 0px 0px 15px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } h3 { font-size: 140%; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #F7F2F2; padding-bottom: 3px; margin-left: 10px; } ul#advertisers { padding: 5px; margin: 0; list-style-type: none; } ul#advertisers li { margin: 5px 0px; list-style-type: none; background-repeat: no-repeat; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; background-position: 0px 5px; background-image: url(http://magichour.biz/rough/images/arrow.jpg); } ul.topblue { padding: 5px; margin: 0; list-style-type: none; } ul.topblue li { margin: 5px 0px; list-style-type: none; background-repeat: no-repeat; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; background-position: 0px 5px; background-image: url(http://magichour.biz/rough/images/arrow-blue.jpg); } ul.advertisers2 { padding: 5px; list-style-type: none; margin: 0px 0px 0px 0px; } ul.advertisers2 li { margin: 5px 0px; list-style-type: none; background-repeat: no-repeat; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; background-position: 0px 5px; background-image: url(http://magichour.biz/rough/images/arrow.jpg); } div.specialarea { background-color: #F2F5FB; border: 1px solid #A6BACA; padding-top: 5px; color: #4D6582; } div.advertisearea { background-color: #F8F4FB; border: 1px solid #CEBDD9; padding-top: 5px; color: #4D6582; margin-top: 30px; } ul#advertisers a:link, ul#advertisers a:visited, ul#advertisers2 a:link, ul#advertisers2 a:visited { color: #633E71; } ul#advertisers a:hover, ul#advertisers2 a:hover { color: #997EA5; } div#printfooter { display: none; } span.quotehide { display: none; } p.smalledit { font-size: 10px; color: #003366; padding-top: 20px; line-height: 13px; } div#leftside h4 { font-size: 120%; font-weight: bold; color: #003366; margin-left: 10px; padding-bottom: 3px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #E8E1E7; margin-right: 10px; } img.aboutimage { float: right; margin-top: 0px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; background-color: #FFFFFF; padding: 4px; border: 1px solid #D1BAC4; } div#leftside dl { margin-top: 5px; margin-right: 5px; margin-bottom: 20px; margin-left: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #E8DBE8; width: 360px; padding-top: 5px; padding-right: 5px; padding-bottom: 10px; padding-left: 5px; } div#leftside dt { font-size: 160%; margin-bottom: 10px; } div#leftside dd { font-size: 80%; margin-top: 3px; margin-bottom: 3px; padding-left: 20px; background-image: url(http://magichour.biz/rough/images/left-arrow.gif); background-repeat: no-repeat; background-position: 0px 4px; margin-left: 30px; } div#leftside dl dt a:link, div#leftside dl dd a:link, div#leftside dl dt a:visited, div#leftside dl dd a:visited { width: 100%; padding: 3px; color: #5B3145; text-decoration: underline; } div#leftside dl dt a:hover, div#leftside dl dd a:hover { background-color: #EBDFEC; } dl div.imgright { float: right; margin: 5px; font-size: 70%; text-align: center; } dl div.imgright img { border: none; margin: 0; padding: 0; } dl div.imgright a img, div.imagecontainer a img { border: 1px solid #F8F4F5; } dl div.imgright a:hover img { border: 1px solid #E2D3DF; } div#contact p { margin-top: 3px; margin-bottom: 3px; } label { font-weight: bold; color: #6F8CB0; } fieldset { border: none; } div#contact { margin-right: 10px; margin-left: 5px; } div#contact input, div#contact textarea { background-color: #FFFFFF; border: 1px solid #E2C2D7; padding: 2px; color: #003366; } p.error { color: #993333; background-color: #FFFFFF; padding: 5px; border: 1px solid #AF7978; } div.thankyou { background-color: #FFFFFF; padding: 5px; border: 1px solid #DDC1D5; margin-right: 10px; margin-left: 10px; } span.small { font-size: 70%; color: #003366; } span.smalledit { font-size: 90%; color: #003366; } span.smallhead { font-size: 65%; font-weight: bold; } span.required { font-size: 100%; color: #990000; } div.followup { background-color: #FFFFFF; padding: 5px; margin-right: 10px; margin-left: 10px; border: 1px solid #E2D8DE; } div.quote { color: #8F6895; padding: 5px; margin-right: 20px; margin-left: 20px; border-top-width: 3px; border-bottom-width: 3px; border-top-style: solid; border-bottom-style: solid; border-top-color: #EDDCE4; border-bottom-color: #EDDCE4; background-color: #FFFFFF; } .padimage { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; } span.price { font-size: 160%; font-weight: bold; color: #003366; } div.imagecontainer { text-align: center; padding: 3px; float: left; width: 122px; margin-right: 5px; margin-left: 5px; } .videosize { font-size: 75%; font-weight: bold; color: #003366; } div#nn4 { font-family: Arial, Helvetica, sans-serif; color: #000000; background-color: #E5E5E5; padding: 5px; border: 1px solid #666666; } ul#navtabs li#videostab { background: url(http://magichour.biz/rough/images/on-tab.jpg) no-repeat; } ul#navtabs li#videostab a { font-weight: bold; } .roundcont, .roundcont3 { width: 150px; float: right; } </style> </head> <body> <div id="container"> <div id="wrap"> <div id="innerbody"> <!--Begin Header--> <div id="nn4">If you can read this message, then you are using an outdated browser. All the information on this website is still viewable, but your visual experience will not be the same. We recommend several sources for <b>Modern</b> browsers such as <a href="http://www.mozilla.com" target="_blank">Mozilla</a>, <a href="http://www.opera.com" target="_blank">Opera</a>, <a href="http://www.mozilla.org/products/firefox/" target="_blank">Firefox (recommended)</a>, and of course the latest <a href="http://www.microsoft.com/windows/ie/...p1/default.asp" target="_blank">Internet Explorer</a><br /> We apologize for the inconvenience</div> <div id="header"> <h1>Magic Hour Productions</h1> <img src="http://magichour.biz/rough/rotate/rotator.php" class="floatright" alt="Magic Hour Productions" /></div> <!--Begin menu--> <div id="tabs"> <ul id="navtabs"> <li id="hometab"><a href="index.php">Home</a></li> <li id="packagetab"><a href="packages.php">Packages</a></li> <li id="videostab"><a href="videos.php">Videos</a></li> <li id="bookonlinetab"><a href="bookonline.php">Book Online</a></li> <li id="abouttab"><a href="aboutus.php">About Us</a></li> <li id="asktab"><a href="whattoask.php">What to Ask?</a></li> <li id="contacttab"><a href="contact.php">Contact Us</a></li> </ul> </div> <div id="content"> <!--You can Edit this--> <h2>Wedding Vows Samples</h2> <!--Right side Information--> <div id="rightside"> <!--Begin round box--> <!--Don't edit this area--> <div class="roundcont"> <div class="roundtop"> <img src="http://magichour.biz/rough/images/topleft-blue.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> <!--You CAN edit this area--> <div class="specials">SAMPLES</div> <ul class="topblue"> <li><a href="wedding-open.php">Wedding Open</a></li> <li><a href="documentary.php">Documentary</a></li> <li><a href="montage.php">Montage</a></li> <li><a href="highlights.php">Highlights</a></li> <li><a href="reception-open.php">Reception Open</a></li> <li><a href="vows.php">Vows</a></li> </ul></p> <!--Don't edit this area--> <div class="roundbottom"> <img src="http://magichour.biz/rough/images/bottomleft-blue.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> </div> <!--End round box--> <div class="roundcont3"> <div class="roundtop3"> <img src="http://magichour.biz/rough/images/topleft-purple.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> <div class="advertisements">ADVERTISERS</div> <ul id="advertisers"> <li><a href="http://www.perfectweddingguide.com/" target="_blank">The Perfect Wedding Guide</a></li> <li><a href="http://www.weddingchannel.com" target="_blank">The Wedding Channel</a></li> <li><a href="http://www.bbb.com" target="_blank">Better Business Bureau</a></li> <li><a href="http://www.yellowbook.com/" target="_blank">Yellow Book</a></li> </ul> <div class="roundbottom3"> <img src="http://magichour.biz/rough/images/bottomleft-purple.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> </div> </div> <div id="leftside"> <div id="leftinner"> <!--Begin Round Box--> <!--Don't edit this area--> <div class="roundcont2"> <div class="roundtop2"> <img src="http://magichour.biz/rough/images/topleft.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> <!--You CAN edit the below area--> <p>The following video clips are samples of Vows we have recorded. Please check back often as more video clips will be added.</p> <div id="imagefloats"> <div class="imagecontainer"> <a href="videos/harrington-vows.wmv"><img src="http://magichour.biz/rough/images/harrington-vows.jpg" alt="Harrington Wedding Vows Sample" /></a><br /> <span class="videosize">3.06 MB (.wmv)<br /> <a href="videos/harrington-vows.wmv">Download Now</a></span> </div> <div style="clear: both;"></div> </div> <p class="smalledit">The videos displayed on this page are in Windows Media Video format. <a href="http://www.microsoft.com/windows/win...0/default.aspx" target="_blank">Download Windows Media Player</a>.</p> <!--Don't edit this area--> <div class="roundbottom2"> <img src="http://magichour.biz/rough/images/bottomleft.gif" alt="" width="14" height="14" class="corner" style="display: none" /> </div> </div> <!--End Round Box--> </div> <div style="clear: left;"></div> <br style="clear:both"/> </div> </div> <div id="quotes"> <h3>What our Clientele has to say</h3> <img src="http://magichour.biz/rough/images/quoteleft.gif" alt="" /> <span class="quotehide">"</span> You put on a great production. We all loved the video <span class="quotehide">"</span> <img src="http://magichour.biz/rough/images/quoteright.gif" alt="" /> <div class="quoteby">~ Bob Barth</div> </div> </div> <div id="footer">Magic Hour Productions, Inc. © 2004 | All Rights Reserved</div> </div> </div> <div id="printfooter"> Magic Hour Productions<br /> 6931 Wesley Court<br /> Indianapolis, IN 46220<br /> (317) 513-1496</div> </body> </html>
PaulLast edited by Paul O'B; Sep 8, 2004 at 06:59.
-
Sep 8, 2004, 06:50 #3
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey Paul, just curious
, could you tell me specifically what you altered as that is alot of code to sift through to find 1 or 2 changes, even though I can't believe you actually went through it all.
Your a trooper, thats for sure.
Thanks
-
Sep 8, 2004, 07:06 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Sorry, I was in a bit of a rush and didn't want to leave anything out. I've gone through and marked the changes in bold (I hope i haven't missed any)>
You can tidy those 2 clear statemtnts into one if you use my clearer code as follows.
Code:.clearer{ height:1px; overflow:hidden; clear:both; margin-top:-1px; }
Code:<!--End Round Box--> </div> <div class="clearer"></div> </div> </div> <div id="quotes">
-
Sep 8, 2004, 07:30 #5
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul, I will take a closer look when I get home. I appreciate it.
-
Sep 8, 2004, 23:29 #6
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey Paul,
I have been fiddling with the css that you provided and I it works great for the videos pages, but the other pages get messed up.
I believe that is because on the videos series of pages, specifically, I override the css with embedded css on those pages.
I do this to force the main content area wide and the right side smaller.
That may be the culprit.
Can you think of some css code that i can apply ONLY to those pages via my current embedded rules?
For example, on this page,
http://magichour.biz/event/documentary.php
You will notice I have this
Code:<style type="text/css"> ul#navtabs li#videostab { background: url(images/on-tab.jpg) no-repeat; } ul#navtabs li#videostab a { font-weight: bold; } .roundcont, .roundcont3 { width: 150px; float: right; } div#leftside { margin-right: 250px; }
Its only the video pages I am having issues with. The others look great in IE and Firefox because all other pages are suppose to have a skinnier left side and a wider right side.
Thanks
Bryan
-
Sep 9, 2004, 08:45 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have been fiddling with the css that you provided and I it works great for the videos pages, but the other pages get messed up.
You could obviously just set up new classes/id's for that page with the changes I made above and the other pages wouldn't be affected. You do need to follow the way I have instructed above as that is the only way I know of stopping the floats from clearing all floated content.
Alternatively you could use the same styles but duplicate them and then preced them with a body id. You could give the video pages an ID of video. Then you just address the styles preceeded by the body id to apply them uniquely to that page.
e.g.
html:
Code:<body id="video">
Code:body#video div#rightside { margin: 0px 25px 25px; padding: 0px 0px 0px 20px; float: right; width: 150px; display:inline;/* ie fix*/ }
The choice is yours. Either use new classes on that page or use the same classes pre-fixed by the body tag. (Test on a small portion first before you make large changes, in case there are other unforseen problems.)
Hope that helps.
Paul
-
Sep 9, 2004, 10:37 #8
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul, I will give it a shot.
btw - Last night when I was fiddling with your previous solution, I noticed that the pages that did not have the <div id="innerleft"> worked just the same as the one with that tag. Not really sure if adding that actually did anything.
-
Sep 9, 2004, 10:56 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
<div id="innerleft">
If you don't have any little floats in the page (as in the video page) then there is no need for that inner.
The inner is a large float that contains little floats and if you clear a float inside a float then hopefully it won't be able to clear its parent because its inside it.
Thats the theory anyway
Paul
Bookmarks