WordPress.org

1. worldtreephotography
   Member
   Posted 1 year ago #

   I've done a few tweaks to the default WordPress theme (the one based on Kubrick), and I'm quite happy with how it looks in Firefox (for both Mac and Windows users). But in Internet Explorer, the sidebar disappears and the bottoms of the pages are cut off (both the last entries and the footer).

   I know there's a difference in how MSIE renders widths when margins and padding are involved, and I've tried to take that into account using some hacks:

   page {
   	background-color: #35190b;
   	background: #35190b;
   	color: #FFE4E1;
   	margin: 20px auto;
   	padding: 0;
   	width: 860px;
   	border: 0px solid #959596;
   	}
   
   /* Hide from IE-Mac \*/
   html>body #page {
   	background-color: #35190b;
   	background: #35190b;
   	color: #FFE4E1;
   	margin: 20px auto;
   	padding: 0;
   	width: 900px;
   	border: 0px solid #959596;
   	width/**/:/**/ 860px;
   }
   /* End hide */

   I've played with the width of the page to compensate for possible overflows. I checked the sizes of any images to make sure they aren't too big. I validated the code at validator.w3.org, and it all checks out.

   I've searched around various fora and haven't found a solution that works.

   I'm using WordPress 2.6, and the address of my site is http://worldtreephotography.com/wordpress/. Any suggestions would be greatly appreciated.

2. jonimueller
   Member
   Posted 1 year ago #

   Use a conditional comment to serve up the differing CSS to IE browsers only. Read about that here:
   http://www.quirksmode.org/css/condcom.html

3. worldtreephotography
   Member
   Posted 1 year ago #

   Thanks for the link, jonimueller. I've seen conditional comments before, but I've never used them. I didn't see a way to put conditional comments in the CSS directly, so I made a conditional statement in the header to redirect the CSS reference file to an IE-specific one I made.

   <link rel="stylesheet" href="http://worldtreephotography.com/wordpress/wp-content/themes/default/style.css" type="text/css" media="screen" />
   <!--[if IE]>
   <link rel="stylesheet" href="http://worldtreephotography.com/wordpress/wp-content/themes/default/style-ie.css" type="text/css" media="screen" />
   <![endif]-->

   The file style-ie.css has no asterisk or inheritance tricks. It just has different values for the relevant widths (#page and .narrowcolumn).

   Sadly, this does not seem to fix the problem. Any I doing it incorrectly? I've never used XHTML or PHP before, so I could easily have messed up.

   Thanks again for your help!

4. mercime
   Member
   Posted 1 year ago #

   Here's the thing, as MONK would say, you're copying and pasting text from MSWord to your post (except the latest one) and that wreaks havoc on your CSS layout ironically in IE. So if you want to use MSWord, then after you finish, SAVE AS PLAIN TEXT FILE then copy from and paste to your post. If you clean up the code in HTML view of your posts, your layout will be all right (assuming it was good in the first place) Cheers.

5. worldtreephotography
   Member
   Posted 1 year ago #

   Ah, thanks, mercime. That was the problem. I was wondering what that junk was when I initially put up those posts, but I forgot about it.

   Thanks to all for your good ideas and quick responses.

6. jonimueller
   Member
   Posted 1 year ago #

   Word is NOT an HTML or plain text editor. You have a Windows box? Use Notepad.

Topic Closed

This topic has been closed to new replies.