IE margin problems

krad

05-13-2008, 11:25 AM

Hello, I was wondering if anybody would assist me with a few minor problems in my layout.

All of which are in IE, I'm sure someone with more experience could fix this.

1) The search bar expands the height of the top menu.
2) Theres a little bit of my background showing below the banner.
3) The pictures in the photo section wont stack properly.

heres a link to the site http://www.neiu.edu/~campsrec/test/

Heres the code.

CSS
body {
background: #e9ecf4;
text-align: center;
margin: 0;
}

#container {
text-align: left;
width: 99%;
margin-left: auto;
margin-right: auto;
background-color: #e4e9f5;
color: #333;
border: 1px solid #115d93;
line-height: 130%;
}

/* top nav starts here */

#topnav {
padding:0;
margin:0;
}

ul#topnav {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}

ul#topnav li {
display: inline;
}

ul#topnav li a {
text-align: center;
width: 4em;
color: #fff;
background-color: #036;
padding: 1 .5em;
text-decoration: none;
float:left;
border-right: 1px solid #fff;
}

ul#topnav li a:hover {
background-color: #0c1938;
color: #fff;
}

#search {
float:right;
padding:0;
margin:0;
}

ul#topnav li#topnav2 a {
text-align: center;
width: 6em;
color: #fff;
background-color: #036;
padding: 1 .5em;
text-decoration: none;
float:left;
border-right: 1px solid #fff;
}

ul#topnav li#topnav2 a:hover {
background-color: #0c1938;
color: #fff;
}

ul#topnav li#topnav3 a {
text-align: center;
width: 8em;
color: #fff;
background-color: #036;
padding: 1 .5em;
text-decoration: none;
float:left;
border-right: 1px solid #fff;
}

ul#topnav li#topnav3 a:hover {
background-color: #0c1938;
color: #fff;
}

ul#topnav li#topnav4 a {
text-align: center;
width: 9em;
color: #fff;
background-color: #036;
padding: 1 .5em;
text-decoration: none;
float:left;
border-right: 1px solid #fff;
}

ul#topnav li#topnav4 a:hover {
background-color: #0c1938;
color: #fff;
}

/* top nav ends here*/

#header {
margin: 0;
padding: 0;
clear: both;
background-color: #0c1938;
border-bottom: 1px solid #115d93;
border-top: 1px solid #115d93;
}

#header img {
margin: 0;
padding: 0;
}

#bottomnav {
/* place holder */
}

#leftmargin {
clear:both;
float: left;
margin: 0;
width: 120px;
border-right: 1px solid #115d93;
background-color: #a5c4da;
height: 27em;
}

/* photos start here */

#leftmargin2 {
text-align: center;
color: #fff;
margin:0;
padding:0;
width: 100%;
background-color:#115d93;
}
#leftmargin2 h4 {
padding: 0;
margin:0;
}

#photos {
padding:0;
margin-bottom:0;
}

#photos img {
padding:0;
margin:0;
border-top: 1px solid black;
}

#viewgallery {
text-align: center;
color: #fff;
margin:0;
padding:0;
width: 100%;
background-color: #036;
}
#viewgallery a {
text-align: center;
color: #fff;
text-decoration: none;
width:100%;
border: 1px solid black;
}

#viewgallery a:hover {
background-color: #0c1938;
color: #fff;
}

/* Photos end here */

#leftmargin p {
padding: 0 1em;
}

#rightmargin {
float: right;
margin: 0;
width: 120px;
border-left: 1px solid #115d93;
background-color: #a5c4da;
height: 27em;
}

#rightmargin p {
padding: 0 1em;
}

#rightmargin2 h4 {
padding: 0;
margin:0;
}
#leftmargin p, #rightmargin p {
margin: 0 0 1em 0;
}

#content {
margin-left: 200px;
margin-right: 200px;
padding: 1em;
max-width: 36em;
}

#content h2 {
margin: .5em 0;
}

#footer {
clear: both;
margin:0;
color: #fff;
background-color: #115d93;
border-top: 1px solid #115d93;
text-align: center;
}

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link href="stylesheet.css" rel="stylesheet" type="text/css">

<header>
<title>Welcome to Campus recreation</title>
</header>
<body>

<div id="container">

<div id="topnav">
<ul id="topnav">
<li><a href="index.html">Home</a></li>
<li id="topnav2"><a href="membership.html">Membership</a></li>
<li id="topnav2"><a href="employment.html">Employment</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="contact.html">Contact</a></li>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box">
<input type="hidden" name="cx" value="012328191495617909727:rd57zhapyvi" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</form>
</div>
</ul>

</div>

<div id="header">
<img border="0" alt="Welcome to Campus Recreation Northeastern Illinois University!" src="images/banner2.jpg">

</div>
<div id="bottomnav">
<ul id="topnav">
<li><a href="facility.html">Facility</a></li>
<li><a href="aquatics.html">Aquatics</a></li>
<li id="topnav2"><a href="club_sports.html">Club Sports</a></li>
<li id="topnav4"><a href="fitness_and_wellness.html">Fitness and Wellness</a></li>
<li id="topnav3"><a href="intramural_sports.html">Intramural Sports</a></li>
<li id="topnav3"><a href="outdoor_program.html">Outdoor Program</a></li>
<li id="topnav3"><a href="informal_recreation.html">Informal Recreation</a></li>
</ul>
</div>



<div id="leftmargin">
<div id="leftmargin2">
<h4>Photos</h4>
</div>
<div id="photos">
<img border="0" alt="test" src="images/photos/test_thumb.jpg"></img>
<img border="0" alt="test" src="images/photos/test2_thumb.jpg"></img>
<img border="0" alt="test" src="images/photos/test3_thumb.jpg"></img>
<img border="0" alt="test" src="images/photos/test4_thumb.jpg"></img>
</div>
<div id="viewgallery">
<a href="gallery.html">View Gallery</a>
</div>
</div>

<div id="rightmargin">
<div id="leftmargin2">
<h4>Poll</h4>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="content">
<h2>Latest news</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="footer">
Northeastern Illinois University - Office of Campus Recreation © 2008 | version 1.1 | Webmaster <a href="mailto:krad759@gmail.com?subject=Hello">
Brian Story</a>
</div>

</div>
</body>

jcdevelopment

05-13-2008, 03:56 PM

Unfortunately, i cant tell the problem with the saerch bar, i believe thats just an IE problem, maybe somone else can enlighten us about it. Any ways i was able to correct the two other problems. Just replace the existing ones with these. Good luck!

#header {
margin: 0;
padding: 0;
clear: both;
background-color: #0c1938;
border-bottom: 1px solid #115d93;
border-top: 1px solid #115d93;
height:75px;
}

#photos img {
padding:0px;
margin:0px;
border-top: 1px solid black;
float:left;
}

tagnu

05-13-2008, 04:04 PM

1) The search bar expands the height of the top menu.
UL#topnav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; COLOR: #fff; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; BACKGROUND-COLOR: #036;
height: 25px;
}

2 and 3
Adding "font-size:1px;" to #photos and #header also solves the issue.

ps: You have a Div and ul with same id
<div id="topnav">
<ul id="topnav">

See this: CSS Classes Vs IDs (http://www.tizag.com/cssT/cssid.php)
Excerpt: Use IDs when there is only one occurrence per page.

krad

05-13-2008, 06:37 PM

Thanks very much for help guys! I'll click the helpful post buttons for ya! The layout is fixed now, I changed the id top nav to a class to correct it tagnu.

The only thing that still isn't working is the search bar.

Anybody have any suggestions for that?

I updated the test page to display the changes.

jcdevelopment

05-13-2008, 06:49 PM

did tagnu's theory not work?

krad

05-13-2008, 10:14 PM

It didn't I changed the height and it didn't work.

If I can't figure it out, I am also looking for suggestions on where to put the search.

jcdevelopment

05-13-2008, 10:22 PM

does this page help any?

http://freeyourdesign.com/css/css-custom-search-field-or-textfield/

krad

05-13-2008, 11:06 PM

Oh wow, that is cool. I managed to shrink it down and change the color ( a bonus). It still increases the height of the menu.

I added this to the css. And i'm updating the main page now with it.

.search {
height: 15px;
float:right;
margin:0;
padding:0;
}

.textinput {
border: 1px solid #000000;
background: #555555;
color: #ffffff;
font-size: .6em;
}

_Aerospace_Eng_

05-14-2008, 12:22 AM

Be aware that you might be violating googles TOS when you alter the search code.

krad

05-14-2008, 01:18 AM

Thanks for the concern.

_Aerospace_Eng_

05-14-2008, 02:20 AM

At least the html that is. You can use CSS to style it all you want.

krad

05-14-2008, 02:35 AM

I have it that way for visual testing right now. I'll read through the TOS and see if I can keep it that way when I'm ready to launch the site later this week.

tagnu

05-14-2008, 07:23 AM

It still increases the height of the menu.

Check this new page (http://tagnu.freehostia.com/debug/neiu/)

Changes:
1. Changed <header> tag to <head>
2. Made the #container{position: realtive;
3. Made .search{position: absolute; top:0; right:0;

You still have topnav id for two menus in your page (other errors (http://validator.w3.org/check?uri=http%3A%2F%2Ftagnu.freehostia.com%2Fdebug%2Fneiu%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)). That may cause issues.

jcdevelopment

05-14-2008, 03:03 PM

Looks real good now on all of the browsers.

nikos101

05-14-2008, 03:46 PM

http://code.google.com/p/ie7-js/

effpeetee

05-14-2008, 06:20 PM

It still looks different in FFox than IE7

Frank

tagnu

05-19-2008, 03:17 PM