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!
This is why I have added: position:relative;left:1px;
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.
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.
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.
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.
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.
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...
@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