Formatting and IE issue
| Project: | Plutado |
| Version: | 6.x-1.1 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Hi, love the theme. I have had a few problems running it on Drupal 6.4. These issues could be specific to my setup, but I thought you might like to take a look.
First, when viewed in IE the site logo at the top is shifted down several pixels and is hidden behind the primary navigation bar. It is positioned correctly in Firefox.
Second, the primary navigation links at the top aren't formatting correctly in Firefox. The farthest link to the right is located several pixels beneath the rest and creates two large boxes around itself when the mouse is over it. This problem doesn't occur in IE for me.
Third, if the "site name" setting is turned off in the theme modifications, the top logo is shown over top of the primary navigation bar. This only happens in Firefox. If viewed in IE, the logo is placed too far down the page and the primary navigation bar is shifted to the right of the logo.
You can the issues on my site, http://www.thecustomgamers.com
I haven't changed any code other than to make the background repeat horizontally in style.css.
Thanks
Deeje
#1
[removed]
#2
I've also got similar problems with my site using this theme. Pity, I really like it.
I get a thick, light grey line above the Login link in IE6 and IE7 (you can also see this at deeje.net)
Any chance of having a look into this?
#3
Hey, awesome stuff. Thanks for the feedback.
Issue 1: (IE navigation placement) : there are specifc stylesheets for ie6 and ie7 for this theme, so you may need to change the in the theme properties for #site-logo in those files. However, from my browser, it looks like the 'top' property for #site-logo inside of the styles.css file could just be removed, and that would go a long way.
Issue 2: (FF navigation links) : remove the following properties from the style.css file and you should be home free.
#primary .last {color: #000000;
padding-right: 15px;
padding-top: 7px;
padding-bottom: 7px;
}
Issue 3: I'll fix this issue related to maintaining a consistent height whether or not a site name is showing in FF in the next update. Giving the #site-name a proper height in the appropriate css file should square you up.
roald, I see the line problem too. erasing the color properties of #header found in the style.css file will make the grey go away.
#header {
background-color: #E2E2E2; <----- erase this line
margin: 0 auto;
width: 980px;
}
Let me know how far this get you guys and if I need to make any other adjustments to get your themes working the way we want them.
#4
I have had success fixing similar display issues in IE7 by adding "z-index" values to both #primary and #site-logo to fix layering issues, as well as playing with their positioning by adding "position: relative;" to #primary and playing with various "left:", "right:", etc values until everything lines up and layers the way I want it to. Final product now displays correctly in Firefox 3, IE7, and Safari 3.1.2 (these are all I've tested so far).
Thanks for the great template!
#5
Edit: The primary links line up fine now, but I haven't been able to get the IE7 issue fixed. I added z-index:auto to both #site-logo and #primary with no results; the nav links are still shifted to the right and the logo is too far down. Could anyone paste in the exact lines to add as well as what files to add them to? I would appreciate it oh so much. =)
Also for the next version it might be nice to accommodate different sizes of site logos. I worked for hours trying to get mine to fit in but the template goes crazy if the logo is a different size.
#6
On the site logo, in style.cssI changed #site-logo{ position: relative; } to { position: absolute; } and the logo doesn't screw up the whole rest of the page layout. But in IE, all the header, logo, and site info divs are still stacked instead of overlapping and it puts a LOT of space up at the top.
#7
Great input, thanks a lot. That worked perfectly. I also opened ie7.css, which is located in plutado/css, and changed the #site-logo there to position:absolute. All the extra room on the top of the page is now gone and the page looks identical in both FF and IE7.
Everything is fixed now; thanks for all your help!
#8
Automatically closed -- issue fixed for two weeks with no activity.