Trouble with CSS positioning and IE

jburnard - June 10, 2009 - 21:15

Hi Folks,

I was hoping someone would take a look at my site in IE for me and see if you can make sense of this problem.

If you go to www.cypressbeauty.com in IE you'll see at the top right I have a two button menu (about us, contact) and it's supposed to sit just above the header banner. I used the ie.css file to place that as it was different from where I had it placed for Firefox. Anyway, now if you click on any other link you'll see that once you're not on the index page the menu drops inside the header banner, not above it. I can't figure out why its not the same for all pages. I am using the front page module, but for every page I am publishing that menu in the same block in the same region.

Any input is very much appreciated.

Jim

Anyone at all?

jburnard - June 11, 2009 - 03:33

Anyone at all?

=-=

VM - June 11, 2009 - 03:41

you may want to get developer tools addon for IE to help sort this out. it's firebug and webdeveloper for IE and should help locate the problem.

Thanks for the reply, I'll

jburnard - June 11, 2009 - 13:25

Thanks for the reply, I'll take a look for that add on.

Still stuck, can anyone help?

jburnard - June 26, 2009 - 16:12

Hi again folks,

At VeryMisunderstood suggestion I got the IE developers tools going to take a look any why I am having these positioning problems. Unfortunately I still don't see it. Everything looks the same to me. I have uploaded two screenshots. The first shows my "copyright info" where it belongs which is on the index page. The second shows the same "copyright info" on a different page, but in the same block, using the same css. Can anyone tell me why the copyright info in the "incorrectpostion.jpg" is positioned way to low compared to the other image?? Also, below is the css that I'm using to position it (in both cases)

Thanks for reading, any help is very much appreciated.

http://www.burnardweb.com/images/correctposition.jpg - shows copyright info in the correct postion
http://www.burnardweb.com/images/incorrectposition.jpg - shows copyright info too low on the page

#copyright {
color: #000000;
float: left;
font-family: Helvetica, sans-serif;
font-size: 12px;
position: relative;
bottom: 33px;
padding-top: 0px;
}

=-=

VM - June 26, 2009 - 19:08

Why using blocks for these small bits of text?

I'd consider using the footer in administer -> site information

The copy right looks fine to be except on the front page where it is pushed up into another div at the bottom of the graphic and can't be read.

Thanks again

jburnard - June 26, 2009 - 20:14

Thanks again VeryMisunderstood. I guess it depends on the version of IE you look at it with... Looks ok in some on the front page but not on subsequent pages. I have the same problem with my top nav buttons as they are supposed to be above the header but on anything but the front page they are inside the header. Gotta love IE.

Hi Folks, I am still

jburnard - July 7, 2009 - 13:33

Hi Folks,

I am still struggling with this issue but I think I may have just found something... When trying to change my ie.css to fix the positioning I realized (by using the dev tools in IE) that the browser isn't looking at my ie.css at all. It's looking at my custom css file and some of the original css files from the theme but not at the ie.css file. I guess my question is, how do I tell my drupal site that when someone is using IE, use the info my ie.css file?

Thanks in advance!

Jim

Good news! I finally figured

jburnard - July 7, 2009 - 13:49

Good news! I finally figured out the problem :) I had normally been running the site with the css optimization turned on... now it was off for some reason and apparently that was too many css sheets for IE to look at. After finding this thread:
http://drupal.org/node/453864
I'm back on track.

One more question though... how can I create different style sheets for different versions of ie? Where do you tell drupal to check the version and use a specific .css? It's working now but things are still messy in IE 8.

Many thanks for reading,

Jim

Load the stylesheet inside

Alan Cooney - July 7, 2009 - 21:59

Load the stylesheet inside conditional comments; read http://www.quirksmode.org/css/condcom.html for a quick guide as to how to do this.

Good luck!

Alan Cooney
http://www.avioso.com

Alan Cooney
Avioso Designs
http://www.avioso.com

Alan thank you for the

jburnard - July 16, 2009 - 12:02

Alan thank you for the direction. Most appreciated.

 
 

Drupal is a registered trademark of Dries Buytaert.