Web design question

[KapitanSparrow]

I heard some of you guys are into web design. Can anyone offer a suggestion why I have these weird pieces of extra padding next to my photos? I am talking about the little rectangles in between the pics. I bet the solution is really easy so I figured why try to figure it out on my own? Seriously though, as one web design amateur to the next, please help before I turn to drinking (more drinking that is)?

Here's a screenshot:



I can provide the code if necessary.

PS: We should get a Bogley section dedicated to web design and things of that nature. Or at least a post.

Here's the CSS:

ul.gallery {
list-style: none;
}
.gallery li img {
width: 150px;
height: 113px;
}
.gallery li p {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
color: #333;
text-align: center;
text-shadow:1px 1px 10px #fff;
list-style: none;
}
ul.gallery li a {
float: left;
border: 1 solid #FFF;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
-moz-box-shadow: 0px 2px 15px #333;
positon: relative;
text-decoration: none;
background-color: #EEE;
list-style: none;
}
ul.gallery li a:hover {
z-index: 10
-moz-box-shadow: 3px 5px 15 px #333;
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
background-color: #FFF;
z-index: 50;
}
ul.gallery li a.pic1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
position: relative;
top: 100px;
left: 100px;
}
ul.gallery li a.pic2 {
z-index: 2;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-45deg);
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
position: relative;
top: 200px;
left: 200px;
}
ul.gallery li a.pic3 {
z-index: 3;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-45deg);
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
position: relative;
top: 300px;
left: 300px;
}
ul.gallery li a.pic4 {
z-index: 4;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-45deg);
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
position: relative;
top: 400px;
left: 400px;
}
ul.gallery li a.pic5 {
z-index: 5;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-45deg);
-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;
position: relative;
top: 500px;
left: 500px;
}

HTML:

<ul class="gallery">
<li><a href="#" class="pic1"><img src="images/trips/bell_canyon.jpg" alt="Bell Canyon"><p>Bell Canyon</p></li>

<li><a href="#" class="pic2"><img src="images/trips/black_hills_yellowstone.JPG" alt="Black Hills i Yellowstone"><p>Black Hills i Yellowstone</p></li>

<li><a href="#l" class="pic3"><img src="images/trips/blackhills_2010.JPG" alt="Black Hills 2010"><p>Black Hills 2010</p></li>

<li><a href="#" class="pic4"><img src="images/trips/browns_hole.jpg" alt="Browns Hole"><p>Browns Hole</p></li>

<li><a href="#" class="pic5"><img src="images/trips/butterfield_canyon.JPG" alt="Butterfield Canyon"><p>Butterfield Canyon</p></li>
...
</ul>

[KapitanSparrow]

Never mind. I figured it out.

[Sombeech]

What was the problem?

[KapitanSparrow]

Oh it's one of those dumb mistakes. The <a> links were missing the closing </a> tag. I had /> instead of </a>. The fact that the link worked didn't help with warning me to take a second look at the code. I was convinced it was a problem with CSS, heh.

<li><a href="#l" class="pic3"><img src="images/trips/blackhills_2010.JPG" alt="Black Hills 2010"<p>Black Hills 2010</p></a></li>

[Iceaxe]

Are you hand coding this stuff?

Most website software these days will tell you when you are just being dumb.

[KapitanSparrow]

Hand coding in Dreamweaver. My first ever attempt at a personal website - www.dzikizachod.com - needs a lift so I am playing around with ideas. A lot of the new HTML5 and CSS3 solutions and tricks are really neat as long as they are not viewed on IE

[accadacca]

Nobody still uses IE right?!

[KapitanSparrow]

I think there are tons of people out there who just use whatever comes standard with their laptop or PC

[Iceaxe]

Nobody still uses IE right?!

If by "nobody" you mean the most used web browser on the internet.... than yes, you would be correct.

[accadacca]

Sarcastic...

It's what I do for a living...yep necessary to optimize for IE. 9 is much better, 8 still sucks....

IE = PITA. Ask any designer or developer.

[accadacca]

Interesting though...might not be after 2012.

It Looks Like Google Chrome Could Pass Internet Explorer This Year



Google Chrome's market share grew 84% in 2011, The Verge reports via data from StatCounter.

It's now used as the primary web browser on 27% of computers worldwide. Internet Explorer is still in the lead, commanding 39% of global web browser market share.
If the trend continues, Chrome is on track to pass Internet Explorer some time in 2012.

However, StatCounter's data should not be considered fact. Net Applications has Chrome at only 22% (which is smaller than Firefox, but still growing fastest amongst competitors), and Internet Explorer at 52%.

Read more: http://articles.businessinsider.com/...#ixzz1j0KYJM3p

[Iceaxe]

I've been watching this for years.... and yes, its interesting. Mostly because I've been watching IE's lead slowly shrink and wondering what they were going to do about it.

FWIW: I think MS made a mistake when they didn't make IE9 compatable with Windows XP. There are really a lot of computers around still running XP and when those folks upgrade there browsers they are moving out of the MS house.