Page displays broken in ie 7 and opera (mac)

  • 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?

    https://www.lovelyjunkie.com/

    awesome thanks

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter the_producer

    (@the_producer)

    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="https://lovelyjunkie.com/designer/" class="designer-hover"><span class="displace"></span></a></li>
		        <li><a href="https://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

    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.

    Thread Starter the_producer

    (@the_producer)

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

    Thread Starter the_producer

    (@the_producer)

    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 ??

    Thread Starter the_producer

    (@the_producer)

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

    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:
    https://www.atlars.com/?page_id=229

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Page displays broken in ie 7 and opera (mac)’ is closed to new replies.