|
CSS - Css Is Not Rendering Correctly On First Load
I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right.
Here's the page I'm referring to: http://www.auroratheatre.org/show.php?prod_id=23&ref=seas (you can change that prod_id number to see the page with different queries) The photos are all pulled from a MySQL query, and the code to display them goes something like this: PHP Code: <html> <body> <div id="wrapper"> <div id="content"> <div id="col"> .... </div> <div id="main"> ... <h1>Cast</h1> <div id="cast"> <ul> <?php do { ?> <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li> <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?> </ul> </div> <div class="clear"></div> <ul style="padding-top: 10px"> <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li> </ul> <div class="clear"></div> </div> <div id="photocol"> <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" /> </div> </div> <div class="clear"></div> <div id="footer">...</div> </div> </body> </html> and the relevant CSS is he Code: html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
text-align: center;
}
html>body, html>body #wrapper {
height: auto;
}
#content {
width: 774px;
margin: 0px auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 403px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
width: 100%;
background-color:#000;
position: absolute;
bottom: -2px;
left: 0px;
text-align: center;
}
.clear {
clear: both;
}
#cast ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#cast li {
display: block;
width: 100px;
float: left;
text-align: center;
line-height: 70%;
}
This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time? Thanks, Daniel Similar TutorialsHello 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. Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
hi guys, i've modified a script that i found on the web that creates a CSS dropdown menu (without using any javascript whatsoever). The menu's work flawlessly in Google Chrome, Firefox and IE 7/8. However, IE 6 like usual is giving me a problem. However, it is only a minor problem but i cant seem to fix it. Please find attached a copy of my HTML and CSS code. Please note:- The css code in the test.txt file is used for styling in all browsers. The css code found in the test_dropdown_ie.txt file is for IE 6 only. If you create these files and open test.html in IE 6 then it will appear fine at first. But if you hover over one of the menu's in the middle, then you will notice that the left hand border of the resultant dropdown menu does not display. However, it does display when you hover over one of the options on the resultant dropdown menu. I need the left hand side border to appear at all times. I did manage to get it working by changing the following CSS rule:- Code:
.menu ul li a:hover ul
{
left: -1px;
}
I changed this to:- Code:
.menu ul li a:hover ul
{
left: 0;
}
This solved the disppearing left hand side border issue but it threw up an even worse issue. If you make this fix and hover over the first or last menu item, you will notice the border of the dropdown menu does not line up with the top menu. I do not like this and find it less acceptable than the initial problem. What i need to do is find a way of lining up the top menu's border with the resultant dropdown menu's border and stop the disappearing left hand side border issue. Any help would be greatly appreciated. Thanks. I am having a problem with a couple divs not rendering correctly. I'm building an online tournament bracket system, and I'd like the divs to be flush with each other, but in all browsers it's rendering incorrectly. css Code: Original - css Code <style type="text/css"> div { font-family: Arial, Verdana, "Times New Roman", sans-serif; font-style: normal; color: Black; } .gamecontainer { position: absolute; width: 120px; } .player { font-size: 12px; background-color: lightblue; width: 100%; text-indent: 0.5em; border: solid 1px; margin: 0px; padding: 0px; } .infoblock { border-right: solid 1px; font-size: 10px; width: 100%; text-indent: 0.5em; margin: 0px; padding: 0px; } </style>
html4 Code: Original - html4 Code <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> I want to use conditional comments to load a style sheet for IE7. When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle. When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended. I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox. It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page. How do I resolve this problem? 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 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 I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now. The First Page Second Page Code:
.top_article_pic {
float:left;
margin: 0 9px 0 0;
}
div#articles_bg {
width:850px;
background:#2A475F;
padding:24px;
}
div#articles_page {
background:#FFF;
border:1px solid #000;
padding:12px;
}
div#articles_page2 {
height:800px;
background:#FFF;
border:1px solid #000;
padding:12px;
}
span.h1 {
font-family:Arial,Verdana,Sans-serif;
font-size:2em;
color:#2A475F;
font-weight:bold;
}
span.author {
font-family:Arial,Verdana,Sans-serif;
font-size:.9em;
font-style:italic;
color:#2A475F;
}
div#articles_page p.main_article {
margin:18px 0 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
}
div#articles_page p.main_article_p{
width:500px;
margin:18px 17px 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
float:left;
background:#FFF;
}
img.right_thumb {
border:1px solid;
}
p.click_enlarge {
font:.8em Arial,Verdana,Sans-serif;
color:#2A475F;
}
div#articles_page p.main_article_p2{
margin:12px 0 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
background:#FFF;
}
img.right_float {
float:right;
margin:0 0 0 15px;
border:1px solid #000;
}
p#left_article {
margin:10px 0 0 0;
color:#000;
font:.8em Arial,Verdana,Sans-serif;
}
p.article2 {
margin:9px 0 0 0;
text-align:justify;
font:.8 Arial,Verdana,Sans-serif;
width:530px;
font:.8em Arial,Verdana,Sans-serif;
}
div.right_pic {
width:161px;
padding:10px;
font:.8em Arial,Verdana,Sans-serif;
color:#2A475F;
margin:0 10px 0 0;
float:left;
background:#ccc;
border:1px solid #000;
}
Thanks in Advance Hi, Trying to get my website to work in IE7. Got to collumns. Side bar and main content. It works fine in firefox, opera and chrome but not in IE7. In IE7 the main content doesn't appear next to the side bar, instead its at the bottom the pade. The site is at accentibrass dot com If anyone has any ideas they'd be much appreciated! thanks http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now. Someone said something about problems with floats but i didnt quite udnerstand it Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine. Visit this site: (you will have to do it twice because you need to login first.) http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2 u: admin p: testadmin I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery??? CSS for that section: Code:
#newsletter_subject
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
#newsletter_preview
{
overflow: auto;
background-color:#000066;
}
#recipients
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
and then the corresponding html: Code: <div id="newsletter_subject">flashden newsletter!</div> <br> <div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br> <br> <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br> </div> <br> <div id="recipients">This Newsletter WILL be sent to the following users:</div> etc..... My navigation displays correctly in IE 7+ and Mozilla Firefox, however in IE Under 7 the navigation places a double line and adds additional padding to the navigation. Does anyone have a remedy for this problem? Hi I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac. Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS I have been going crazy trying to find out what is wrong. The CSS link is here Thanks Jake 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 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? I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right? So, how do I fix this so it works in IE? I've posted a sample page with the problem he http://aaron.verge-rpg.com/vergebrd/test.html Any help would be appreciated. On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around? Thanks Hi, I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly. The page can be viewed here. On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help. The menu code in the HTML: Code: <table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <ul class="topmenuul" id="dmenu"> <li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a> </li> <li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a> </li> <li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a> <ul class="submenuul"> <li class="submenuli"><a href="authors.htm">Authors & Artists</a></li> <li class="submenuli"><a href="families.htm">Families</a></li> <li class="submenuli"><a href="musicians.htm">Musicians</a></li> </ul> </li> <li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a> </li> <li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a> <ul class="submenuul"> <li class="submenuli"><a href="bio.htm">Bio</a></li> <li class="submenuli"><a href="press.htm">Press</a></li> <li class="submenuli"><a href="contact.htm">Contact</a></li> </ul> </li> </ul> </td> </tr> </table> The CSS for the menu: Code: .topmenuul{
list-style-type:none;
margin: 0px;
padding:0px;
}
.topmenuli{
list-style-type:none;
float: left;
margin-left: 10px;
/* border-left:1px solid #000000; */
/* border-right:1px solid #000000; */
padding: 0px;
color: #000000;
}
.topmenutitle{
display:block;
color:#000000;
}
.topmenuli a:link {
color: #000000;
}
.topmenuli a:visited {
color: #000000;
}
.topmenuli a:hover{
display:block;
padding-top: 1px;
padding-bottom: 1px;
text-decoration:none;
color:#cccccc;
background:#fff;
width: 120px;
}
.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding: 0;
display:none;
color:#000000;
}
.submenuli a{
display:block;
padding-top: 1px;
padding-bottom: 1px;
width: 120px;
text-decoration:none;
color:#000000;
background:#fff;
margin-top: 1px;
}
li:hover ul, li.over ul{ /* lists nested under hovered list items */
display: block;
}
#dmenu li>ul {
top: auto;
left: auto;
}
#content {
clear: left;
}
-->
#dmenu {
font-family: Georgia, Helvetica, Sans-Serif;
font-size:10px;
text-align:center;
font-color: #000000;
}
.topmenutitle {
background:#fff;
text-indent:0px;
text-decoration: none;
padding:0px;
padding-top: 1px;
padding-bottom: 1px;
color:#000000;
width: 120px;
}
.submenuul {
background-color:#fff;
background-position: top left;
}
.submenuli a{
text-decoration: none;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
}
.submenuli a:link{
color:#000000;
}
.submenuli a:visited {
color:#000000;
}
.submenuli a:hover{
text-decoration: none;
background:#fff;
color: #cccccc;
padding-top: 3px;
padding-bottom: 3px;
}
|
|||||||