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? :haha: 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:

50339

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 (http://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 :haha:

[accadacca]

Nobody still uses IE right?! :lol8:

[KapitanSparrow]

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

[Iceaxe]

Nobody still uses IE right?! :lol8:

:roll:

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

[accadacca]

Sarcastic... :haha:

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. :facepalm1:

[accadacca]

Interesting though...might not be after 2012.

It Looks Like Google Chrome Could Pass Internet Explorer This Year

http://static7.businessinsider.com/image/4f030a446bb3f70b71000066/statcounter-chrome.jpg (http://static7.businessinsider.com/image/4f030a446bb3f70b71000066/statcounter-chrome.jpg)

Google (http://www.businessinsider.com/blackboard/google) Chrome's market share grew 84% in 2011, The Verge (http://www.theverge.com/2012/1/2/2676388/chrome-internet-explore-firefox-marketshare-2011-statcounter-net-applications) reports via data from StatCounter (http://gs.statcounter.com/#browser-ww-monthly-201101-201112).

It's now used as the primary web browser on 27% of computers worldwide. Internet Explorer (http://www.businessinsider.com/blackboard/internet-explorer) is still in the lead, commanding 39% of global web browser market share.
If the trend continues, Chrome (http://www.businessinsider.com/blackboard/chrome) is on track to pass Internet Explorer some time in 2012.

However, StatCounter's data should not be considered fact. Net Applications (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1&qpcustomb=0) has Chrome at only 22% (which is smaller than Firefox (http://www.businessinsider.com/blackboard/firefox), but still growing fastest amongst competitors), and Internet Explorer at 52%.

Read more: http://articles.businessinsider.com/2012-01-03/tech/30583239_1_google-chrome-net-applications-market-share#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.