Webforumz's RSS FeedRSS Webforumz RegistrationRegister Contact Webforumz StaffContact

Image float problem

This is a discussion on "Image float problem" within the Web Page Design section. This forum, and the thread "Image float problem are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Jul 7th, 2006, 14:10
SuperMember

SuperMember
Join Date: Nov 2005
Location: England
Age: 27
Posts: 313
Thanks: 1
Thanked 0 Times in 0 Posts
Image float problem

I'm trying to get two images side by side at the top of the page. When in dreamweaver they work but in safari the second image goes below first and is consequently unviewable.

http://www.timothy-clark.com/equipment/punchbags.html

It seems to create a 10-15 pixel gap between them. Could you help me, maybe look at css?

The images, together, come to a width of 750 - the same width as wrap.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2  
Old Jul 7th, 2006, 14:50
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image float problem

I'm none too cool on CSS but, could it be:
Code: Select all
<div id="wrap">
(Maybe make the wrap 1 pixel larger?)

(problem exists in IE6 too)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jul 7th, 2006, 16:02
SuperMember

SuperMember
Join Date: Nov 2005
Location: England
Age: 27
Posts: 313
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Image float problem

well i tried making the images 5-10 pixels smaller and no luck.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Jul 7th, 2006, 16:30
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image float problem

Had a look @ your CSS but I'm outta my depth so I'd better leave ya to the big boys.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jul 7th, 2006, 19:05
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image float problem

your problem is with this css code.
Code: Select all
#logo {
	background: #000;
	height: 92px;
	width: 750px;
	
	border-style:none;
	float:left;
	padding: 0;
	margin: 0;
	}
	
#logo .img {
	padding: 0;
	margin: 0;
}
Remove the . from in front of img. You are not defining a class called img, you are refering to img's contained inside an element with an id of logo.

The float: left; needs to be in the '#logo img' style definition and not in the '#logo'. At the moment your floating the containing div left and not the images it contains.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Jul 8th, 2006, 11:14
SuperMember

SuperMember
Join Date: Nov 2005
Location: England
Age: 27
Posts: 313
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Image float problem

brilliant! thanks.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Jul 8th, 2006, 14:40
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image float problem

I'm using IE6 (1024x768) and your two header images are lined up in it now, but there appears to be a white gap just to the right of the second, and the line beneath is broken to the left (start of the NavBar).
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
image, float, problem

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Float problem with Firefox Emzi Web Page Design 10 Apr 4th, 2008 13:02
Image float misbehaving in IE vs FF andym01480 Web Page Design 2 Feb 19th, 2008 22:37
css float problem milly Starting Out 3 Jul 9th, 2007 03:51
How to float 2 image hyperlinks on same line AdRock Web Page Design 6 Apr 2nd, 2007 15:30
right float problem... c_martini Web Page Design 11 Aug 2nd, 2006 14:47


All times are GMT. The time now is 19:17.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8