Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    IE margin problems

    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
    Code:
    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

    Code:
    <!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>
    
    <!-- option of top or bottom navigation -->
    
    <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>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!


    Code:
    #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;
    }

  • Users who have thanked jcdevelopment for this post:

    krad (05-13-2008)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    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&#37;; 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
    Excerpt:
    Use IDs when there is only one occurrence per page.
    Last edited by tagnu; 05-13-2008 at 04:09 PM.
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • Users who have thanked tagnu for this post:

    krad (05-13-2008)

  • #4
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by krad; 05-13-2008 at 06:42 PM.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    did tagnu's theory not work?

  • #6
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by krad; 05-13-2008 at 10:20 PM.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

  • Users who have thanked jcdevelopment for this post:

    krad (05-13-2008)

  • #8
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

    Code:
    .search {
    	height: 15px;
    	float:right;
    	margin:0;
    	padding:0;
    }
    
    .textinput {
    	border: 1px solid #000000;
    	background: #555555;
    	color: #ffffff;	
    	font-size: .6em;
    }

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Be aware that you might be violating googles TOS when you alter the search code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the concern.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    At least the html that is. You can use CSS to style it all you want.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    May 2008
    Location
    Chicago
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Quote Originally Posted by krad View Post
    It still increases the height of the menu.
    Check this new page

    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). That may cause issues.
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #14
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Looks real good now on all of the browsers.

  • #15
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,007
    Thanks
    59
    Thanked 10 Times in 10 Posts


  • Users who have thanked nikos101 for this post:

    krad (05-16-2008)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •