spamoom Posted July 16, 2007 Share Posted July 16, 2007 Looks fine in Firefox and Opera, deforms in IE Here is the link I am talking about http://vaguely-imaginary.co.uk/ Can anyone see anything wrong with my source code please? Quote Link to comment Share on other sites More sharing options...
spamoom Posted July 16, 2007 Author Share Posted July 16, 2007 Any one? Please ? I really need to fix this Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 16, 2007 Share Posted July 16, 2007 What is happening is that the right side has too much content for the container and, in IE, it is squeezing out the middle column. Consider this. #rightside has a width of only 198px with a left/right padding total of 22px and a left/right margin total of 44px. Then the .panel has another left padding of 6px and .panel-text has another right margin of 10px. Then you put include the .header class with a width of 198px, and the table tells it to use a cellpadding of 1. Do the math. You can try playing with adjusting the #rightside paddings or, try "overflow:hidden" in the .panel css. It is a matter of the widths, margins and paddings being too much for the wrapper. Something has to give. And in IE you also get the doubled margin float bug to contend with. But you don't want to change it from viewing properly in all the proper browsers! So I recommend making a separate IE-only css and to call it via a conditional comment in your head tag like this - <!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="ie-only.css" /><![endif]--> - this will modify those elements you want for IE only: So, the "IE-only.css" needs to ONLY modify the paddings and size of your #rightside ID and/or .panel, .paneltext, .header. You don't need to re-type the whole class, just those changes you it to modify. The following could be the entire IE-only.css. #rightside {padding: 12px 12px; margin: 0 12px 22px 12px; .paneltext {overflow:hidden} .header {width:100%; margin:0} Using the conditional comment and the IE-only.css will keep the page working properly in all the other browsers. Just play around with the widths, margins and paddings for the #rightside stuff. Quote Link to comment Share on other sites More sharing options...
spamoom Posted July 16, 2007 Author Share Posted July 16, 2007 Thanks for replying, I will have a look =D Quote Link to comment Share on other sites More sharing options...
spamoom Posted July 17, 2007 Author Share Posted July 17, 2007 Ok, I've made an ie only sheet, but it does not seem to be including it in internet explorer. I know this for a fact as I have put vibrant colors and no change. Here is a snippet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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" /> <meta name="Description" content="<? echo $neaura->getvar("meta_description"); ?>" /> <meta name="Keywords" content="<? echo $neaura->getvar("meta_tags"); ?>" /> <!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="themes/<? echo THEME; ?>/ie-only.css" /><![endif]--> <title><? echo $neaura->getvar("site_name")." - Powered By Neaura"; ?></title> Am I doing something wrong? Thanks in advance Quote Link to comment Share on other sites More sharing options...
spamoom Posted July 17, 2007 Author Share Posted July 17, 2007 Well, i still haven't got the IE include working, but somehow I fixed it =/ Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 18, 2007 Share Posted July 18, 2007 Try putting the conditional comment AFTER the other css. CSS and JScript are usually placed after all the other meta tags. Although I'm not sure if that is required. Try changing the 7 to 5 [if lt ie 5]. That will cover versions 5.0 through 7. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.