Jump to content

Why does my div go under my image in Firefox


TriAdX

Recommended Posts

please check out http://www.forevertreasuredphotography.com/index.htmIn IE my div is pushed to the right of my image that is aligned left. The text followsin Firefox my div stays under the image and my text wraps around the image...What gives?How can i make it so it displays like the IE one in Fire fox.I know i could use position:absolute for everything.. but i'd rather not.Let me know! Thanks!

Link to comment
Share on other sites

check this out ==> Images and Text Blocks floated and displayed in-lineOne from column A and one from column B should work.The reason (I think) you are having trouble with this page is that it appears to be working fine using IE6. Then the problems begin when using other Browsers. Another problem, IMHO, is the basic page design seems to be a mix of Tables and CSS. This could be making the page behave weird, too. The transition from tables to full css design should be considered for the page. It would be easier for you to only have to deal with the single approach to the layout, the css site would load quicker, etc, etc... but that is your call...because your page looks fine in IE6, this tells me that your page was designed with IE6 in mind, so the code was written to look good in IE6, and this results in having to hack the standard compliant Browsers to behave in a manner which is against the Standards. Guaranteed you will have difficulties using this approach. For cross-browser designs, you are far better off designing to the Standard compliant Browsers and then hacking for IE versions by using Conditional Comments in the style selection to offer the IE specific CSS files as required. I believe that you will be able to avoid the use IE specific style sheets in this case, but you will need to extract a section of html from the Sample page, and some from the 2-column page. And the appropriate CSS, too. Combine them into the content div/table cell on your page and you are done.The explanation for the design is pretty straight forward. First create a div to contain the image and text div's. Images are floated left inside it's div, and given a width. Then the text inside it's own div is given a margin wider than the image, so they appear side by side.The image title and description on the Sample page are optional, of course. It doesn't appear that you would need or use them.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...