UL (list) naturally indents? Also, test in IE? Thanks!

Dev Shed Forums Sponsor:

October 15th, 2012, 07:43 PM

TheRadHatter

Registered User

Join Date: Oct 2011

Posts: 18

Time spent in forums: 3 h 51 m 29 sec
Reputation Power: 0

UL (list) naturally indents? Also, test in IE? Thanks!

Hi, so do UL naturally indent when displayed inline? I didn't think they did, but mine are for some reason. Also, if someone could test this code out in IE and get back to me it would be greatly appreciated (I have a Mac and haven't installed IE/can't afford it).

Here's the dimensions of the images I'm using so you can properly test it:

The #first image "CSlogo3.jpg" in #navbar is 115x115
The "Robot.png" image in #media is 400x397
The #social buttons are each around 62x61

Thank you!

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Common Shiner</title>

<style>

body { margin: 0; }

#wrapper { margin: 0 2%; }

#navbar { border-bottom: 1px solid;
 font-size: 20px; }

#navbar li { text-decoration: none;
 display: inline; 
 padding: 0 2%; }

#navbar li a { text-decoration: none;
 color: black; }

#navbar li a:hover { color: white; }

#first { border: none; }

#second:hover { background: maroon;
 border-radius: 10px;
 color: white; }

#third:hover { background: navy; 
 border-radius: 10px;
 color: white; }

#fourth:hover { background: purple;
 border-radius: 10px; 
 color: white; }

#fifth:hover { background: green;
 border-radius: 10px; 
 color: white; }

#last { border: none; }

#last:hover { background: orange;
 border-radius: 10px; 
 color: white; }

#container { margin: 0; }

#news { float: left; 
 padding: 2%; }

#media { float: right; }

#social { border: 2px solid; }

#social li { text-decoration: none;
 display: inline; }


</style>

<body>

<div id="wrapper">
<section id="navbar">
<ul>
<li id="first"><img src="Photos/CSlogo3.jpg" /></li>
<li id="second"><a href="CommonShinerNew.html">Home</a></li> -
<li id="third"><a href="CommonShinerNewMusic.html">In Ears</a></li> -
<li id="fourth"><a href="CommonShinerNewVideo.html">In Motion</a></li> -
<li id="fifth"><a href="CommonShinerNewPhotos.html">In Suspended Animation</a></li> -
<li id="last"><a href="CommonShinerNewContact.html">In Your Inbox</a></li>
</ul>
</section>


<div id="container">
<section id="news">
<p>Tumblr/Blog roll here</p>
</section>

<section id="media">
<h1>NEW ALBUM OUT NOW!</h1>
<img src="Photos/Robot.png" />
<iframe width="400" height="100" style="position: relative; display: block; width: 400px; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=2240921553/size=venti/bgcol=FFFFFF/linkcol=4285BB/transparent=true/" allowtransparency="true" frameborder="0"><a href="http://commonshiner.bandcamp.com/track/faith-i">Faith & I by Common Shiner</a></iframe>
<br />
<br />

<iframe width="400" height="100" style="position: relative; display: block; width: 400px; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=465020944/size=venti/bgcol=FFFFFF/linkcol=4285BB/transparent=true/" allowtransparency="true" frameborder="0"><a href="http://commonshiner.bandcamp.com/track/cold-chicago-shores-live-on-the-cs-porch">Cold Chicago Shores (live on the CS porch) by Common Shiner</a></iframe>
<br />
<br />

<iframe width="400" height="100" style="position: relative; display: block; width: 400px; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=2745716667/size=venti/bgcol=FFFFFF/linkcol=4285BB/transparent=true/" allowtransparency="true" frameborder="0"><a href="http://commonshiner.bandcamp.com/track/april-says-goodnight">April Says Goodnight by Common Shiner</a></iframe>

<section id="social">
<ul>
<li><a href="http://www.facebook.com/commonshiner"><img src="Photos/Facebook_lynda.png" /></a></li>
<li><a href="http://www.twitter.com/commonshiner"><img src="Photos/Twitter_black.png" /></a></li>
<li><a href="http://commonshiner.tumblr.com"><img src="Photos/tumblr_button.png" /></a></li>
<li><a href="http://www.youtube.com/commonshiner"><img src="Photos/YoutubeButton.png" /></a></li>
</ul>
</section>
</section>
</div>

</div>
</body>
</html>

UL (list) naturally indents? Also, test in IE? Thanks!

Developer Shed Advertisers and Affiliates