CSS - Fix For Body Text Not Rendering Properly In Ie8 On Website?

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 All,

I'm having problems getting a couple of CSS rules to render on my page. First, here's the page:

http://www.righteousguitar.com/

Here are the rules that aren't rendering properly (or likely at all):

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.)

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px.

I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can.

Thanks in advance for any ideas or suggestions.

Sam

Not sure if this should go in HTML forum or here, but there is CSS involved, so...

Anyways, have a page here with 3 images aligned right. (Currently they are floated right, but problem originally was seen with aligned right, changed to css float and problem is the same).

http://www.4for4.com/draft_board/to...r_id=HOTSTOVE13

I only see the issue in Chrome, but in Chrome if I refresh the browser, about every third or forth time the text will not wrap around one of the bottom 2 images in the main content area (Hancock & Theron). The text will just lay over the top of the image. If I refresh it will work again, but randomly will not render correctly over one of the two images that is aligned right.

Is this just a weird Chrome rendering issue? Or is there some property I can add to the image that will force this to not happen?

Thanks a lot.

is there a way to make all text on a page a certain size unless otherwise noted, this is what i have and its not working and im not sure how else to do it

body { margin:0px; font-size: 10px; }

or would i have to do it for each "span" or "div" "p" i have?

Hi folks, don't usually post in the CSS forum here, but in the php forum I have got great help so give it a go. Basically I need to know how to center two divs on a page which themselves have float:left attribute.

When I set text-align:center on the body a couple of other divs aligned perfectly so I did not have to worry about different res's. But I need these two divs (leftnav and content) next to each other and acheived this by setting the float:left attribute. The CSS code is below, I hope you can help, i have tried but these two divs in one outer div (without any float set) but didn't work.

Code:

body
{
	font-family: "Lucida Sans";
	font-size: 12px;
	margin: 0px 0px 10px;
	border-top: 0px none #000000;
	border-right: 0px none #000000;
	border-bottom: 5px none #000000;
	border-left: 0px none #000000;
	scrollbar-arrow-color: #D20000;
	scrollbar-3dlight-color: #4F4F82;
	scrollbar-darkshadow-color: #4F4F82;
	scrollbar-face-color: #f4f4f0;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #d0d0d0;
	scrollbar-track-color: #ffffff;
	text-align: center;
	display: block;
}


.leftnav {
	float: left;
	color: #000000;
	font-size: 12px;
	font-family: "Trebuchet MS";
	border-top: 1px solid #000000;
	border-right: 1px none #000000;
	border-bottom: 1px none #000000;
	border-left: 1px none #000000;
	padding: 0px;
	white-space: nowrap;
	width: 220px;
	margin: 10px 0px 0px 10px;
	clear: both;
	text-align: left;
}

.content {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-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: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	float: left;
	white-space: normal;
	margin-top: 10px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-family: "Trebuchet MS";
	font-size: 13px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 1000px;
	margin-right: 0%;
	list-style-type: none;
	text-align: left;

}

Thanks very much.

I posted something the other day, but that thread was elaborate but not helpful at all, because it missed a useful example with CSS sheet and everything. So here's another attempt and hopefully people know where the problem resides. I've stripped down the following page as far as I could within limited time.

Before you click and open this URL, I think it's best to read my introduction first, because the problem often only occurs the first time after opening IE5.5 or IE6.0.

With IE6.0 it might be that it _does_ work for you now. I notice that the bug is very infrequent with IE6.0. Sometimes it feels like IE6.0 cached the right page and doesn't want to show the wrong page the first time anymore. With IE5.5 it's still consistent on first time though... it will show the bug!

A refresh may fix the page. Which is basically like opening the page a second time.

http://www.stack.nl/~rem/problem.html

It's a page with 3 big sections: header, middle, footer. I've stripped the footer as far as possible and reduced the header. The footer stays at the bottom of the window/viewport or bottom of the page if the page is longer and requires scrolling.

What problem to look for? The news section to the right, it should have 2 identical blocks (in this example). But it cuts off the second block entirely and cuts the end of the first one. Basically where the form ends on the left side. On reload of the page the error will be "fixed".

By accident I stumbled upon this thread (<- link) where they also seem to discuss the cut off of contents when the regular body text is shorter than the float text. Though for me the problem only appears on the page with the form and not with other pages. They couldn't figure out the trigger or cause either and the thread stopped in 2002. I'm trying that <p></p><p></p> workaround...

If anybody knows some other workarounds or knows what triggers this problem. Feel free and invited to post any suggestion that can solve this matter. Adding more contents text is no option alas.

Hello

Can u hlp me please?

have look at www.verexelto.sk/test/test1.php - this is good version of the page but without any text in the footer.

after i try tu put any content into footer (f.e. some text)
the page wil not do this properly (the way i want it :-) )

have look at www.verexelto.sk/test/test.php (scroll down)

What should i have to do , what am i doing wrong?

Thank you

I use a css class to control my text around an image, but it does not print floated. Instead it prints like they are block elements.
Code:

img.newsthumb{
	float: left;
	clear: left;
	padding-right: 5px;
	border: 0px;
}
img.newsthumb2{
	float: right;
	clear: right; 
	padding-left: 5px;
	border: 0px;
}

Any clue on how to fix this.

I'm having a dumb moment coding my site. I can't get the #project_content tag in my stylesheet to work properly. It should place page contents to the right of the menu on this draft page but kicks it to the bottom. Could someone please take a look at the css to see where I've gone wrong. Thanks

Hi,

I'm having issues trying to get text to center on a few buttons.

Here's the site: http://www.highspeeddirtcheap.com

The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals

Moreover, the buttons don't even show up in IE6 or 7.

Any ideas of what I'm doing wrong?

Thank you.

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

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

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.

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?