WordPress.org

1. the_producer
   Member
   Posted 2 years ago #

   My pages render correctly in Safari and Firefox on Mac and Windows, however the header is pushed way down into the container content in Opera and IE 7 so far...tried playing around with floats and margins, but really I'm fumbling around in the dark. The developer tools in Opera and Firebug in FF haven't helped me track this down either...

   I think it may have something to do with the way the divs are relating to the tables in the header, but I'm not sure as I am a novice with this stuff at the moment.

   Any ideas?

   http://www.lovelyjunkie.com/

   awesome thanks

   (I can post some code if its more helpful, just let me know)

2. the_producer
   Member
   Posted 2 years ago #

   Okay I just figured out that it's definitely this code in the header.php file that breaks the layout:

   <div id="profile-flags">
   
   			<ul id="flag-list">
   		        <li><a href="http://lovelyjunkie.com/designer/" class="designer-hover"><span class="displace"></span></a></li>
   		        <li><a href="http://lovelyjunkie.com/director/" class="director-hover"><span class="displace"></span></a></li>
   	        </ul>
   
   	          </div>

   If i remove the code the images disappear of course, but the layout otherwise appears intact.

   here's the css for those elements:

   #profile-flags {float: right;overflow: hidden;margin-top: 105px;margin-left: 0px}
   #flag-list {margin-left: 0px}
   .displace {position: absolute;left: -5000px}
   a.designer-hover {display: block;width: 145px;height: 45px;text-decoration: none;background: url("images/flags.png")}
   a.designer-hover:hover {background-position: -145px 0}
   a.director-hover {display: block;width: 145px;height: 45px;text-decoration: none;background: url("images/flags.png");background-position: 0 -45px}
   a.director-hover:hover {background-position: -145px -45px}

   thanks

3. songdogtech
   Member
   Posted 2 years ago #

   It could be problems with clearing floats, but page validation shows you have broken tables that you should try fixing first: [Invalid] lovelyjunkie.com/ - W3C Markup Validator. Scroll down in the report to see page source and line numbers.

4. the_producer
   Member
   Posted 2 years ago #

   Hmm yes I see that...looks like I messed some stuff up moving things all around. Thanks I'll try to clean that up...

5. the_producer
   Member
   Posted 2 years ago #

   Songdogtech you are the man.

   I didn't have <td></td> around my divs in a couple spots that was breaking my tables and caused the issue, looks good right now in Opera...checking in IE next. Thanks my man :)

6. the_producer
   Member
   Posted 2 years ago #

   Fixed Ok in Opera...still a little messy in IE7...but it's close.

7. Emmti
   Member
   Posted 2 years ago #

   Did you manage to fix the IE7 bug? I am having the same problem. Thought my work was done on this site, but to my horror I checked it in IE7 yesterday (I work on a mac with Firefox and Safari, and had checked IE8 where everything was fine), but in IE7 the content area has moved down below the footer and I just cannot figure this one out.

   Any suggestions from someone with more programming skills? Here is the site:
   http://www.atlars.com/?page_id=229

Topic Closed

This topic has been closed to new replies.