Hi Daemonia. Welcome to SitePoint!
Hm, did you mean the bottom images/links? http://stommepoes.nl/borderchrome.jpg 'cause I see a border ok on the large kitty.
Your CSS doesn’t really mention a border. While most browsers will automatically add a border to images as part of their default stylesheet, I don’t believe they all do (default stylesheets differ per browser, which is why you have that margin: 0; padding: 0). My “reset” also includes a
img {
vertical-align: bottom;
border: 0;
}
declaration as well. Later, any borders I want, I add explicitly.
warning:
BTW padding: 0 on * (all elements) is a bad practice on any sites which will contain a form… in many browsers, once default padding is removed from form controls (radio buttons, select dropdowns, etc) they cannot be added back in. So instead, I list the 3 or 4 elements who DO have default padding in browsers (there just aren’t many who do) and set just those to padding: 0.
#galerie a{
color:#064242;
}
#galerie a:visited{
color:#000;
}
#galerie img:hover{
border:none;
margin:2px;
}
I do see some issues with your code, so I’ll get to those in a minute. Re the images:
First, browsers seem different in determining what is “visited” when your link is “#”. IE for example seems to make everyone set to “#” as “visited” if you click any single one (since, makes sense, they all go to the same “address”).
Second, here is how you put borders around image links:
//inside #galerie
<a href="foo">
<img src="foo" width="width" height="height" alt="where do I go?">
</a>
#galerie a {
border: 2px solid #thecolour;
}
#galerie a:visited {
border-colour: #somethingelse;
}
#galerie a img {
no padding, no margin, no borders;
}
OR
#galerie a img {
border: 2px solid #thecolour;
}
#galerie a:visited img {
border-color: #somethingelse;
}
Normally, the inline anchor will be able to encompass the image and surround it with a border.
To go from no border to a border or vice-versa, padding comes into play, and the border can go on the image itself.
//starts with no border let's say
#galerie a img {
padding: 1px;
}
//border appears on focus, hover, and stays on visited
#galerie a:focus img, #galerie a:hover img, #galerie a:visited img {
padding: 0;
border: 1px solid #thecolour;
}
The padding is a placeholder for when there is no border. Chrome makes the images dance around now because of that 2px margin you’ve got going on :hover. And, if the border is going to be on the image, then I’d use padding.
In general, to keep things most accessible, I would put the states like hover etc on anchors and let them affect a:somestate img instead of img:hover. IE6 won’t hover images for example, and keyboarders cannot :focus on non-focusable elements (anchors, form controls, that’s about it for focusable elements).
So, some notes on your page (I should have put that * {padding: 0;} remark down here actually):
font-size:62.5%;
There is a myth still floating around the internets… that setting this on a page is a Good Thing. This is wrong. : ) It was used to make 1em = 10px, however since that ONLY works on browsers who have 16px set as their default setting, it causes issues for those who need a larger default font setting on their browsers or who have their system dpi set higher. Macs and PCs differ on their basis default dpi and anyone with bad sight can increase that setting anyway… with 62.5%, your text will be awfully small for some folks.
You could get away with setting the fonts to 80%, but to be honest, I let the user’s system determine font size (and em size) by just setting it to 100% (setting it at all is done for the benefit of IE, who has a resizing bug which is magically fixed if you state a % font size on your body element). And yeah, I tend to set all these settings on the body, not the html element.
#wrap{
margin:auto;
[b]margin-top: 3em;[/b]
position: relative;
[b]min-height: 100%;[/b]
width:760px;
}
Two things wrong with this: the min-height is being ignored, because height and min-height need a parent with a set height… to do the min-height trick, you need to set html and body elements to height: 100%.
After doing that, you cannot then add a top margin… nor top padding. Anyone who is supposed to be at least 100% high cannot then be told to be higher/taller. You can’t eat more than 100% of a candy bar, can you?
Some inner element would have to have the margin-top. This same inner element can have bottom-padding to make room for your footer, which I assume was supposed to be a sticky footer? Right now, it’s sticking to where the bottom of my browser USED to be, so it’s in the middle of the page when I scroll down. If you were doing a sticky footer, getting min-height to work correctly would make that work.
(sticky footer pseudo-code:
<html>
<body>
<#wrap>
<#someinnerelement/>
</#wrap>
<#footer/>
</body>
</html>
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
/*IE6*/
* html #wrap {height: 100%;}
#someinnerelement {
margin-top: 3em;
padding-bottom: height of #footer;
}
#footer {
position: relative;
height: set height;
margin-top: -theheight;
}
that’s basically what works)
links:
#nav a{color:#8dfcf8;}
#nav a:visited{color:#306865;}
#nav a:hover{color:#306865;}
Remember you can do this:
#nav a{color:#8dfcf8;}
#nav a:visited, #nav a:hover{color:#306865;}
but also, do not neglect :focus. Keyboarders generally should get the same benefits as mouse users:
#nav a{color:#8dfcf8;}
#nav a:visited, #nav a:focus, #nav a:focus{color:#306865;}
#active p{
display:inline;
display: -moz-inline-box;
display: inline-block;
height:29px;
padding-left:0.6em;
background-position: left top;
background-repeat: no-repeat;
background-image: url(img/btn_left.png);
margin:-7px;
font-size:1.5em;
[b]z-index:1;[/b]
}
z-index can only be set like that on “positioned” elements (relative fixed or absolute). So right now, this is ignored by all browsers.
I’m not sure display: inline is doing anything for you there. If you were going for accomodating IE, it comes afterwards (so then also needs to be hidden from smarter browsers).
p {
display: -moz-inline-box; (sometimes inline-box works better than inline-block but it depends on what you’re doing… also, this is only for Gecko engines running the equivalent of Firefox 2… FF 3 does not need this statement, but K-Meleon does)
display: inline-block;
blah…
}
- html p {display: inline;} /ie6/
*+ html p {display: inline;} /ie7/
(or a separate stylesheet for IE, whichever)
#footer{
clear:both;
width:100%;
background-color:#000;
position: absolute;
bottom: 0;
}
Since abso-po’d elements are taken out of the flow, I do not believe they have the ability to clear anything anyways. Since you’ve set the bottom to “0”, that’s where it stays… even if I scroll.
Now if you wanted it to always be at the bottom of the browser/viewport (so moves as people scroll) then you want position: fixed… does not work in IE6, but in those cases we give IE6 special position: absolute rules and maybe some Javascript. I find fixed footers have some problems and usually try to avoid them (you can’t scroll from side to side with those of the content inside is wider than the browser viewport for example).
Hope some of that helps.
My CSS skills are obviously a bit rusty. And yes, my problem is with the bottom images.
(I put the link in red to better show the problem) Unless I’ve forgotten something… Changing the padding/margin doesn’t help.
I guess I’ll go back to font:100%, as you suggest. Any reason to prefer the body over the html element?
