Problems with margins on div's and images

[OM2]

I want zero space between div's and images
I've tried everything, nothing works!
I was hoping someone could point out where I was going wrong

I have this code:

	<div style="width:100&#37;;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/london-bridge.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
		<div style="clear: both;"></div>
	  <div style="width:40%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/1.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
	  <div style="width:60%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="d.html"><img src="images/2.jpg" alt="Porsche Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
		<div style="clear: both;"></div>
	  <div style="width:30%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="a.html"><img src="images/bmw.jpg" alt="BMW Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
	  <div style="width:70%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="b.html"><img src="images/bmw2.jpg" alt="BMW 2 Car" style="width:100%;position:relative;left:1px;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>

This image shows what I get:

http://i.imgur.com/U8JdS.jpg

I should explain why I have done this way and why the image widths are set to be 100% width

The code is for a mobile website and I need the images to stretch all way across the screen - regardless of device or orientation

ONE MORE PROBLEM: the single image at the top goes all the way across - this is fine.
BUT, below this, I have 2 images side by side - the right hand image ALWAYS sits 1 pixel away from the right edge!
Grrrr!!!!
This is why I have added: position:relative;left:1px;

Where am I going wrong?

Thanks


OM

[Eye for Video]

Can you post a link to the actual on-line page?
That is really the best way to get help on this.
There may be other factors related to your issues.
For example,

I have added: position:relative;left:1px;

You can't just give an element a declared position without considering the "Parent Rule".
For example, if you give that element "position:relative;left:1px;" and the parent does not also have a declared position, the element will in fact be positioned as declared 1px left, but a space will be left as though the element was still in the natural flow.
So to use position:relative plus an offset, you must first give the parent of that element a declared position.... or, you'll end up with a blank space.
Best wsihes,
EfV

[OM2]

Evf, thanks for the reply

See the link here:

http://development-testing.info/app/

I'm lost, even if there were other CSS rules, I would have thought if I applied the following to EVERYTHING:

style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"

that this would remove any margins predefined

Let me know what you think

Thanks


OM

[Eye for Video]

So are you saying you don't want any white space top, bottom, or sides of all the images?
Space between the cars can be removed by getting rid of position:relative and the left: 1px;
Space between the rows of images seems related to the fact that they are anchors (links) and font is bold for those links.
Remove the <a>s and test with just the images. That will verify if the <a> part is causing the problems.
EfV

[TheBoot]

It's probably related to your positioning...
anyway.... maybe play with border, as it is an aspect of the div.
Could also have to do with the images themselves... if they were sliced poorly or something that'll do it.

[OM2]

thanks for the replies

i removed the <a> tags - same result
i also added style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0" to the <a> tags first - same result

Space between the cars can be removed by getting rid of position:relative and the left: 1px;
EfV

i think i'm causing confusions here
i put this in, because the right hand side edge doesn't go to the edge - and instead is 1 pixel in!

i thought there would be a simple solution
what am i doing wrong?

[auntnini]

There's a link to jQuery stylesheet (with a lot of gradients, shadows and borders) but no link to one of your own. Would it help to zero out all margin & padding?

html, body, img { padding: 0; margin: 0: width: 100&#37;; border: 0; }

[OM2]

thanks for the reply

just tried that
i added the following after other css imports:

<style type="text/css">
html, body, img { padding: 0; margin: 0: width: 100&#37;; border: 0; }
</style>

no effect

the thing is: there HAS to be a solution!
i'm just not experienced at css like u guys!

[TheBoot]

meh, don't worry about your experience. I'm slow a $hit when it comes to learning new things.... sometimes it's really a matter of how persistent you are and how much free time you have lol. I think I got it sorted out for you though... give this a go.

index:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
	<head>
		<meta http-equiv="Content-Type" content=:text/html; charset=UTF-8" />
		<title> tester </title>
		<link href="tester.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="london"><a href="c.html"><img src="images/london-bridge.jpg" alt="Ferrari Car"></a></div>
<div class="ferrari"><a href="c.html"><img src="images/1.jpg" alt="Ferrari"></a></div>
<div class="porsche"><a href="d.html"><img src="images/2.jpg" alt="Porsche Car"></a></div>
<div class="bmw"><a href="a.html"><img src="images/bmw.jpg" alt="BMW Car"></a></div>
<div class="bmwtwo"><img src="images/bmw2.jpg" alt="BMW 2 Car"></a></div>

</body>
	
</html>

CSS:

img {max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;}

div.london {position:relative;
float: left;
width: 100%;
height:50%;
display:inline;
padding:0px;
border:0px;
margin:0px;}

div.ferrari {position:relative;
float: left;
width: 40%;
height: 25%;
display:inline;
padding:0px;
border:0px;
margin:0px;}

div.porsche {position:relative;
float: left;
width: 60%;
height: 25%; 
display:inline;
padding:0px;
border:0px;
margin:0px;}

div.bmw {position:relative;
float: left;
width: 30%;
height: 25%; 
display:inline;
padding:0px;
border:0px;
margin:0px;}

div.bmwtwo {position:relative;
float: left;
width: 70%;
height: 25%; 
display:inline;
padding:0px;
border:0px;
margin:0px;}

Now, I got rid of ALL spacing because that's what I understood you were going for... if you still want the spaces between the rows just change {margin:0px;} to i believe {margin:15px 0 0 0;} (reads clockwise, top, right, bottom, left.) you may not need the px in there. The images expand to fit the div right now too so.... if you want them to keep their aspect-ratio you might need javascript.

[jedaisoul]

I should explain why I have done this way and why the image widths are set to be 100% width The code is for a mobile website and I need the images to stretch all way across the screen - regardless of device or orientation

You query seems to have been answered, I'd just like to question your above comment. Why do you assume that mobile = low resolution? The new iPad has a resolution considerably greater than Full HD! So, I think you need to consider what the site will look like on medium or hi-res screens as well.

For example, I've just revised my small stable of sites to be displayed on screens from 320 or 400 px wide upwards. Some cannot realistically fit below 400 px without a major re-write hence the difference. I also used two different techniques:

1. Sites which could adjust smoothly I made fully flexible between 320 px and 880 px width.

2. Sites which looked naff in interim widths I constrained to three widths: 400 px, 640 px and 880 px, using PHP code.

Of course, these techniques are not suited to all sites, but if you are interested, take a look here...

[OM2]

@theboot: thanks a million for the code - really appreciated
that didn't quite work, u can see the code here: http://development-testing.info/app/z.html

someone else gave me code that did the trick

this code did the trick:

html, body {margin: 0;}
#container {
	width: 100%;
	margin: 0;
	overflow: auto;
	background: #999;
}
.width_30 {width: 30%;}
.width_40 {width: 40%;}
.width_60 {width: 60%;}
.width_70 {width: 70%;}
	.width_30, .width_40,
	.width_60, .width_70 {float: left;}
		.full_width {width: 100%;display: block;}
img {border: none;}
a {outline: none;}

[OM2]

@jedaisoul, i'm targeting the iphone and going for a width of 640
this seems to work well with all plaforms tested
on bigger screens, it still looks ok - i wouldn't complain at all
on smaller screens it also looks ok

the trick for me was using width: 100%