I have a page set between frames that has a table with two columns: the left column has an image fixed in one position and in the right column is text (with images). When the window is at 100%, it works, but if the window is dropped to 3/4 size, the image overlaps the text. Site is catbent.com and it's the all about section.

Thanks

Recommended Answers

All 6 Replies

I'd appreciate some help on this problem as it's one of the few things I have left on the site

Can you post your CSS? You may want too consider cell padding or perhaps a margin for this text.

The CSS for the image is as follows:

img.one {
position:fixed;
}

The text is just straight text. Adding a margin or cell padding would just push the text over slightly and it`d still be overlapped if the window was small enough.

I have a page set between frames that has a table with two columns: the left column has an image fixed in one position and in the right column is text (with images). When the window is at 100%, it works, but if the window is dropped to 3/4 size, the image overlaps the text. Site is catbent.com and it's the all about section.

Thanks

you shouldn't use position: fixed at first place - it is not cross-browser supported and it does exactly what you are complaining about.

Use float instead.

I was the one who was facing this problem also and I have my whole week in solving this problem so in the whole forum is there anyone who can help us because now I am thinking to get rid of and if this will solved I really appreciate that.

Member Avatar for ingeva

I would drop the height and width declarations that don't belong in modern HTML:

<img src="Images/Purple eyes.gif" width="345" height="483" />

Instead I would separate HTML and CSS like this:

HTML:
<img class='portrait' src="Images/Purple eyes.gif" />
CSS:
.portrait {
     float:left;
     width:30%; /* or something that fits */
}

The heigth will always be correct (the aspect ratio won't change) and the text follows nicely on the right side. If you need to separate this from more text (or pictures) use a tag with style='clear:both;' .

inge

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.