HTML and CSS

image

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2008

Posts: 15

Reputation: cab_driver is an unknown quantity at this point

Solved Threads: 0

cab_driver cab_driver is offline

Offline

Newbie Poster

image

Aug 27th, 2009

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

•

Join Date: Oct 2008

Posts: 15

Reputation: cab_driver is an unknown quantity at this point

Solved Threads: 0

cab_driver cab_driver is offline

Offline

Newbie Poster

Re: image

Aug 27th, 2009

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

•

Join Date: Apr 2008

Posts: 642

Reputation: Xlphos is an unknown quantity at this point

Solved Threads: 78

Xlphos

Offline

Practically a Master Poster

Re: image

Aug 27th, 2009

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

Last edited by Xlphos; Aug 27th, 2009 at 8:12 pm.

I don't mind helping but please mark your thread as solved once the problem is sorted. If you figure it out tell us how you did it, don't just abandon your thread!

•

Join Date: Oct 2008

Posts: 15

Reputation: cab_driver is an unknown quantity at this point

Solved Threads: 0

cab_driver cab_driver is offline

Offline

Newbie Poster

Re: image

Aug 27th, 2009

The CSS for the image is as follows:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
img.one {
position:fixed;
}
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.

Last edited by peter_budo; Aug 28th, 2009 at 10:56 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: image

Aug 28th, 2009

•

Originally Posted by cab_driver

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.

Last edited by Troy III; Aug 28th, 2009 at 12:24 am.

•

Join Date: Aug 2009

Posts: 1

Reputation: James Walter is an unknown quantity at this point

Solved Threads: 0

James Walter James Walter is offline

Offline

Newbie Poster

Re: image

Aug 30th, 2009

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.

Last edited by James Walter; Aug 30th, 2009 at 7:37 pm.

smith mountain lake
e business consulting

•

Join Date: Jul 2008

Posts: 101

Reputation: ingeva is an unknown quantity at this point

Solved Threads: 9

ingeva

Offline

Junior Poster

Re: image

Aug 31st, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<img src="Images/Purple eyes.gif" width="345" height="483" />
<img src="Images/Purple eyes.gif" width="345" height="483" />

Instead I would separate HTML and CSS like this:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
HTML:
<img class='portrait' src="Images/Purple eyes.gif" />
HTML:
<img class='portrait' src="Images/Purple eyes.gif" />

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

Yes, I'm running Ubuntu. Of course.