|
CSS - Naturally, Ie6 Isn't Rendering The Page Properly...
Even when there is no text in the div...
http://www.megasouldrill.com/test/ When viewed in firefox and IE7, the 'footer' div maintains it's styled height of 15px. In IE6, however, it seems as though the 'footer' div is ignorign the styled height completely. What gives? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type='text/css'>
body{
background-color: #9e9e9e;
}
#footer{
background: url('images/footer.gif');
width: 1042px;
height: 15px;
}
</style>
<title></title>
</head>
<body>
<div id='footer'></div>
</body>
</html>
EDIT: made problem simpler and gave a better title if you're already viewed this. I have since realized that adding overflow: hidden; to the footer styles fixes this as well as changing the background style to include no-repeat Similar TutorialsI have been working on a site for the past week and I am trying to get it to work in every browser. I have tested it with 32 different browers, ranging from different versions to different operating systems. From my review, the following browsers are not rendering the website properly: Phoenix 0.5 on PLD Linux Phoenix 0.4 on PLD Linux Dillo 0.8.6 on PLD Linux MSIE 6.0 on Windows XP MSIE 5.5 on Windows XP MSIE 5.01 on Windows XP MSIE 5.5 on Windows XP Phoenix 0.5 on PLD Linux Navigator 4.8 on PLD Linux They all seem to take the sidebar and push it to the bottom of the page rather than have it to the right. If you view the site in any firefox, you will see exactly how I want it displayed. Please let me know what error exist within my css and then post it here! I have run the site through validator.w3.org and it shows that my site is perfect in terms of validation... I have the doctype specified properly too. Bristol Cove's Validator The website to view the code is: http://www.gc40.com/b2/ I also added the website to www.browsershots.org to view the different browser displays and how different browsers render them... So please, anyone that is willing to go through the snapshots, please tell me the errors you notice and what to do to fix them. BrowserShots.org - Different browser rendering for Bristol Cove's Site Note: as a new user it would not let me use a link(url) Problem:when viewing in IE8 - the text looks grainy notes: Using this page as an example: fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference -text looks smooth and easy to the eye when viewing in Firefox and Chrome -text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors -for example - when visiting other website using IE8 such as: savantcapital.com The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy -i have the same font face as that site and not sure what a fix could be - read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit Questions - has anybody had this issue? - i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website? same goes for morganstanley.com (as another example) - i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes? Thanks in advance. one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7 Jamie The middle content column on our page, (code shown below) is not displaying in IE5 and IE6. Any ideas as to why? see page at federalacqusitionservice Code: start code --> </style> </head> <body> <!-- Generated at () --> <div id="container" > <div id="banner" > <div align="left"><img src="(URL address blocked: See forum rules)" width="400" height="63" /><img src="(URL address blocked: See forum rules)" width="60" height="63" /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "7082054352"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="()"> </script></div> <h1><a href="()">Home</a> | advertise | about us | Contact US</h1> </div> <div id="outer" > <div id="inner"> <div id="left" > <h2><img src="()" /> </h2> <div align="left"> <script type="text/javascript" src="()"></script> <br /> <table width="195" border="0"> <tr> <td><div align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/17/08 */ google_ad_slot = "9592010100"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> </div></td> </tr> </table> <br /> <img src="()" alt="Featured Links" width="200" height="34" /><br /> <br /> <table width="195" border="0"> <tr> <td> <div align="center"> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x240, created 7/14/08 */ google_ad_slot = "0661630514"; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" src="()"> </script> </div></td> </tr> </table> <br /> <br /> <br /> </p> </div> </div> <div id="right" > <h2><img src="()" /></h2> <pre class="style1"><h2><a href="()">(URL address blocked: See forum rules)</a><br />Printing, Promo Items, WebSites <a href="http)">()</a><br />Import to the US with confidence <a href="httprules)">linkstodc.com</a><br />Washington, DC business <br />and living directory.<br /><a href="(URL address blocked: See forum rules)">stickerrocket.com</a> custom sticker, stock labels <a href="(rules)">hostingone.ca</a><br />Affordable web hosting <br /> Become a sponsor to federalacqusitionservice.com click here</h2> <br /> <br /><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/14/08 */ google_ad_slot = "4200878981"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> <br /><br /> <br /> <br /> </div> <div id="content"> <h2><img src="(rules)" width="546" height="34" /><br /> </h2> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td width="268" height="127" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td width="228" height="38" valign="top"> FederalAcquisitionService.com is the link directory for Federal, State, Local and non-profit contracting sources. </td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Check back regularly to see an even greater number of Federal acquisition links.</td> <td width="90"><img src="(URL address blocked: See forum rules)" alt="US Link Directory" width="90" height="60" /></td> </tr> </table> </td> <td width="267" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td valign="top">Reach your clients through sponsored <a href="httpURL address blocked: See forum rules)">text links</a> and <a href="httprules)">featured links</a> on FederalAcquisitionService.com. <br /></td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Text links start at only $9.95 per month, featured image links start at $99 per year.</td> <td width="90"><img src="(forum rules)" alt="Premium Links" width="90" height="60" /></td> </tr> </table></td> </tr> <tr> <td height="14" colspan="2" valign="top"><div align="center"><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "6799108791"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script > <br /> </div></td> </tr> </table> <img src="(rules)" width="546" height="34" /> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td valign="top"><div align="right"><a href="!!tophits!!"><img src="(rules)" width="82" height="35" border="0" /></a><a href="!!whatsnew!!"><img src="(URL rules)" width="50" height="35" border="0" /></a><a href="!!rgs_login!!"><img src="(rules)" width="57" height="35" border="0" /></a><a href="!!add_url_link!!"><img src="(URL rules)" width="73" height="35" border="0" /></a><a href="!!add_premium_url_link!!"><img src="( See forum rules)" width="136" height="35" border="0" /></a><a href="!!register!!"><img src="(rules)" width="72" height="35" border="0" /></a><br /> <br /> </div> <form method="POST" action="(: See forum rules)"> <p align="center"><input type="text" name="keywords" size="33"><input type="submit" value="Search" name="B1"> <a href="(forum rules)">Advanced</a></p> </form> <div align="left">!!psdata!!<br /> <br /> </div></td> </tr> </table> <h2><br /> <br /> <br /> </h2> </div> </div> <!-- end inner --> </div><!-- end outer --> <div id="footer"><h1 align="center">C federalacquisitionservice.com 2008</h1> </div> </div><!-- end container --> </body> </html> Code: end code I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective. I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer. The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right. Here is the link to the SITE Here is a link to some SCREENSHOTS The code:CSS Code:
/*left bar */
#left_bar {
float: left;
position: absolute;
padding-left: 2px;
margin: 160px 12em 0px 0px;
width: 200px;
display: inline;
}
#left_bar ul {
color: #336666;
font-weight: bold;
text-transform: lowercase;
list-style-type: none;
margin: 0;
padding-left: 1px;
}
#left_bar ul li {
font: italic normal 100% 'Times New Roman', Times, serif;
text-align: right;
letter-spacing: 0.1em;
margin-top: 10%;
margin-right: 10%;
float: none;
padding-bottom: 2px;
}
#left_bar ul ul {
font-variant: normal;
font-weight: normal;
line-height: 100%;
text-align: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#left_bar ul ul li {
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 1px;
border: 0;
margin-top: 0;
padding: 0;
padding-left: 8px;
}
#left_bar ul ul li a {
color: #996699;
text-decoration: none;
}
#left_bar ul ul li a:hover {
border-bottom: 1px solid #660066;
}
The code: html Code: <div id="left_bar"> <ul> <li id="calendar"> <?php require( dirname(__FILE__).'/_calendar.php' ); ?> </li> </ul> <ul> <li> <?php require( dirname(__FILE__).'/pophis.php' ); ?> </li> </ul> <br /> <ul> <li> <ul> <li> <?php require( dirname(__FILE__).'/misc.php' ); ?> </li> </ul> </li> </ul> </div> Any thoughts, help, suggestions..... anything...... would be v much appreciated! Thanks for taking the time to read my question. I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up. Why? How do I make "contentleft" always be on the lefthand side? CSS Code:
body {
text-align:center;
margin-top: 0px;
background-color: #d8d8d8;
}
a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}
#frame {
width: 640px;
text-align: center;
}
#main {
background-color: #6699cc;
width: 640px;
}
#main p.pagetitle {
color: white;
font-size: 32;
}
#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}
#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}
#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}
#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
html: 3 colum example. Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 10/15/04 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="bradsonorus@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link rel="StyleSheet" type="text/css" href="test.css"> </head> <body> <div id="frame"> <div id="main"> <img src="C:/Lisa/images/topbar.png" width="640" height="30" alt=""> <img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada"> <span> </span> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="C:/Lisa/LisasNavBar.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#6699cc" /> <embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p class="pagetitle">TESTS</p> <p class="title">Tests:</p> </div> <div id="sub"> <p class="titleleft">Test Topic / Subject</p> <p class="titlecenter">Test Date</p> <p class="titleright">Suggestions</p> <p class="contentleft">Math: Long Division Test</p> <p class="contentcenter">Tuesday, October 15, 2004</p> <p class="contentright">Review pages 31 to 40 in Math text.</p> <p class="contentleft">English: Spelling Test</p> <p class="contentcenter">Tuesday, October 22, 2004</p> <p class="contentright">Practice all the 17 syllable words, they will be on the test.</p> <p class="contentleft">Phys. Ed.</p> <p class="contentcenter">Tuesday, November 5, 2004</p> <p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p> <p><hr width="80%"></p> <p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p> </div> <img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt=""> </div> </body> </html> I've been working on a css zen garden and I've only got one more roadblock untill it is complete... The site works perfectly in IE 6 but all the other browsers don't like it so much. I suspect the problem lies in the positioning of the preamble and the supporting text, but I've tried nearly everything...I can make the site work in other browsers but then resizing the text causes the page to break. Plz help me make the site look and behave the way it does in IE accross all browsers. Here is the page- http://phobos.ramapo.edu/~chdonnel/zenie/ here is the css- http://phobos.ramapo.edu/~chdonnel/zenie/sample.css also the site closely follows the layout methods of this page http://csszengarden.com/?cssfile=/179/179.css&page=1 Thanks, Chris Hi folks Hoping a CSS expert out there might be able to assist. I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768. The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator. In Opera, it is fine at 800x600, but does not render properly at 1024x768 Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari. I am guessing it is something to do with #text ? Do I need to clear: or something like that? If you can help, I would be grateful. Thanks in advance Sol www. waihekemagicmassage.com And: /magic.css Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt http://codymays.net/~private_ftp/theed When viewing this page in IE6, I see the background of the content div rendered below the footer. The second you select all, click on another window and click back, or minimize the maximize the window, it goes away. Is this a problem with my code or a bug in IE (because it works in IE7). Either way, what should I do to go about fixing it? This is a bit of a weird one as its thrown me completely! I have a very simple collection of styled divs which when viewed in IE look rubbish as they have added a few extra pixels in height to the bottom. I've realized that this looks like a rendering issue as when you scroll the window down and back up the extra image thats appearing sometimes changes according to the speed you scroll at!!! (sometimes the line disappears and then re-appears if you scroll faster) I'm using IE 7 (emulated through IE8 as the real IE7 doesn't work on my vista machine????) also the IE tab mod for firefox and my brothers old xp machine with a working IE7 and the issue is occurring on all 3. However when put in IE8 mode it works Here is a lovely images to show whats going on... css + html... Code: <div style="padding:10px;"> <div style="background:url(/images/forums/middle.jpg) repeat-x left top;"> <div style="background:url(/images/forums/left.jpg) no-repeat left top;"> <div style="background:url(/images/forums/right.jpg) no-repeat right top; padding-bottom:10px;"> <div style="padding:18px; color:#FFFFFF; font-size:18px; padding-bottom:30px;">Catagories</div> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> <hr size="1" color="#999999" style="margin:10px 40px 10px 40px;"> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> </div> </div> </div> <div style="background:url(/images/forums/middle_bottom.jpg) repeat-x left top; height:4px;"> <div style="background:url(/images/forums/left_bottom.jpg) no-repeat left top; height:4px;"> <div style="background:url(/images/forums/right_bottom.jpg) no-repeat right top; height:4px;"></div> </div> </div> </div> thanks in advance for any reply when i dont turn of cache in IE my website seems to forget some css rules half of the time its really annoying cause i only see it when i browse the site on the server not local...and only when caching is turned on i use the equal heights columns technique from positioniseverything.net the site having the problem is here the problem is visible on the home page....i think around 1/5th of the clicks... then the link in the top left content box that should be absolute; bottom:0; just crawls up to the text.... like my question is WHY?? does it only do it sometimes Hi there. I have discovered something odd in FF - When rendering borders, the FF engine has a strange offset. If you have the border-top:none; then the right border is exactly 1px higher than the left border. Have anyone experienced the same problem ? - Emil If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. Here's my page: dev.papatime.rewards.openi.com/rewards09/ NOTE: As new member I am not allowed to post a link, so please add h-t-t-p:// Looks great in FF, Chrome, and Safari. In IE8 the grey box at the top of the right hand column is not aligned to the top, throwing off the whole page. You can see the HTML by viewing source of the page, and I will include the relative CSS below. CSS of the container: .twoColFixRtHdr #container { width: 801px; background: #FFFFFF; margin: 0 auto; border: 0px solid #FFFFFF; text-align: left; } CSS of the main column: .twoColFixRtHdr #mainContent { margin: 0 274px 0 0; padding: 0; width:527px; } CSS of the sidebar: .twoColFixRtHdr #sidebar1 { float: right; width: 261px; padding-top: 0px; text-align:center; vertical-align:top; position:relative; } Been banging my head against a wall for hours on this, any help would be GREATLY appreciated! I'm helping my cousin with a design he's doing for a college class. Everything renders out a-OK in Firefox, but in Internet Explorer, the "content" gets pushed way down. The URL is http://jordanmeeter.com/captcalstudios/ . Any theories as to what is causing this? |
|||||||