The padding is working. But your image is too wide, because it’s set to width: 100% but also has 10px border on each side, which increases its width by 20px, pushing it out on the right.
Surprisingly, Firefox just will not take even your outline suggestion Ralph. Help a noob out brother? I know I’m in the weird zone when IEx looks correct and it’s Firefox giving me grief lol.
It works fine in Firefox for me if you use outline instead of border. Make sure to refresh your page/ clear your cache. IE is misleading you here. It’s the other browsers that are being faithful to your code.
The main problem is that you are using an outdated doctype that sends all versions of IE into quirks mode and will use the broken box model which is why the 10px border does not add to the width. It also relegates all the new features of IE9/8/7/6 redundant and makes all versions of IE behave similarly to IE5. You will lose all the new selectors and behaviours developed over the last ten years
use a current doctype and then do something like this:
As you wanted 100% width + 10px border I increased the padding on the parent by 10px each side and simply dragged the image back 10px giving the requirement you wanted.
Never use inline styles (even for demos) because it is so hard to change and even to read.
You originally had 28px on the parent so I made it 38px instead thus reducing the space available inside by 10px each side. When you now add your borders to the inner100% img element they will make the inner element 20px too wide to fit and it will overlap the right side only of the div’s padding by 20px.
2)I then apply a negative left margin of -10px to drag the image to the left by 10px so that it now sits over the extra 10px left padding and the extra 10px right padding we added exactly. This leaves us with 28px space on either side as you wanted.
3)Position:relative is added for IE7 and under as they will quite often drag an element under the background when negative margins are used and position:relative fixes this.
Presume that all four colors – YELLOW, GREEN, RED & BLUE – need to be unique colors, and their image borders, likewise unique.
What I’ve been trying to figure out is how to isolate the class .wrap to effect the 4-sided black 3px frame around any group of photos regardless of how many photos that group will have.
In other words, you see the text heading for PHOTO GROUPING #1? The problem is that the text heading for PHOTO GROUPING #2 needs to be a color other than yellow – and it will be like this for all the photo groups, each with a different HUE theme.
And the other thing I don’t understand is why we can’t move the 7 lines of data in .wrap h1 into .wrap . . . and just eliminate h1 altogether. I’ve tried it and it just doesn’t render properly no matter what I try. One of those two “wraps” we should be able to be shot of, shouldn’t we? especially if we isolate .wrap as a universal container for each photo collage group, thus reducing the number of styles I have to juggle? Dare I ask: Would it maybe be simpler to just do these inline and limit the style to the one that will be universal – the 3px black border – since virtually every other design feature will be unique to its one photo?
I’m not really sure what you are asking but you modify any one of those styles by simply added a class where appropriate to either a parent if you want to reach a group or to the individual if there is only one.
Its all just a matter of specificity and targeting.
Of course I can’t give answers for what you might add afterwards and targeting .class div{} will affect all divs so if you added divs for some other purpose then you would need classes on each div instead.
You will also need to change the headings from h1 to h2 or h3 as you can only have one main h1 heading on the page outside of html5.
There is rarely ever a need to add inline styling (unless you are changing something dynamically) so just add a class to the element that needs different styling and apply the same weight of rule to change it.
e.g.
img.newborder {border-color:blue}
Just add the newborder class to the image or indeed add it to the parent div if you want to change the div as well.
If an element can’t be targeted uniquely the you just need to add a class to isolate it.
But your image is too wide, because it’s set to width: 100% but also has 10px border on each side, which increases its width by 20px, pushing it out on the right.
