CSS fitting both IE 7 and IE 8 while maintaining standards?

  • Lizzard
  • quirky redhead
  • Silver Member
  • User avatar
  • Posts: 69
  • Loc: Indiana

Post 3+ Months Ago

This site is viewed by Internet Explorer. In house, due to a vendor, we HAVE to stay on IE 6. But outside the building we have users on 7 and I am sure they will go to 8 when it is out publicly.
The problem is I am floating a flash presentation and a photo side by side. When I float 2 photos it is dandy fine. But when I stick the flash in there is "seeps" into the horizontal navigation on IE 7 and 8. (It renders the menu transparent in FF -- but I am not thinking about that right now, I am the only FF user)
I don't want to use the "browser sniffing" scripts -- because the site can be targeted as phishing.
I have used the <-- if gt IE 6 .... conditional statement and it didn't work.
I have tried it on the style sheet and on the index page both.
I have done a search and on PIE they have a float hack... I tried that yesterday and it didn't work.



It anyone has any ideas I'd love to try them.

Thanks L
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Well first I recommend getting rid of the default Flash embed code and using something like the SWFObject This solution replaces a div dynamically so you have a better chance to style the Flash.

Second why are you wrapping flash and images with the <p> tag? That tag has strange default padding and margins that are different in every browser. Instead you should have:
Code: [ Select ]
<div class="ancho">
<div id="flashContent" style="float:left; margin-right:20px;">
<!-- flash replaces this entire div -->
</div><div style="float:left; margin-right:20px;">
<img src="http://beta.orgcorp.com/images/main/bldg_new1.gif" alt="new building" width="405" height="169" border="0">
</div>
<div style="clear:both;"></div>
</div>
  1. <div class="ancho">
  2. <div id="flashContent" style="float:left; margin-right:20px;">
  3. <!-- flash replaces this entire div -->
  4. </div><div style="float:left; margin-right:20px;">
  5. <img src="http://beta.orgcorp.com/images/main/bldg_new1.gif" alt="new building" width="405" height="169" border="0">
  6. </div>
  7. <div style="clear:both;"></div>
  8. </div>


Finally you should clear the float with either css or an empty div with a clear tag...
  • Lizzard
  • quirky redhead
  • Silver Member
  • User avatar
  • Posts: 69
  • Loc: Indiana

Post 3+ Months Ago

I wrapped them with a <p> tag to get the images to float side by side since they will be changing frequently. It was the only way I could get them to "line up" in 6 and 7 with some control.

I have not done any flash in a while I am really rusty. So I am still reading the book.

I will try your code, thanks for the help.
  • Lizzard
  • quirky redhead
  • Silver Member
  • User avatar
  • Posts: 69
  • Loc: Indiana

Post 3+ Months Ago

Yeah, that didn't work. I am looking at swfobject now.
Thanks I will try and play with it some more.

I appreciate your help and kindness.

L
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Lizzard wrote:
I wrapped them with a <p> tag to get the images to float side by side since they will be changing frequently. It was the only way I could get them to "line up" in 6 and 7 with some control.

I have not done any flash in a while I am really rusty. So I am still reading the book.

I will try your code, thanks for the help.

graphixboy is right.. If you need to wrap code in something, just use divs. That way you don't have to deal with all the preformatting that the <p> tag comes with, which varies from browser to browser.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 97 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.