www.webdeveloper.com
Results 1 to 12 of 12

Thread: IE Prob (of course)

  1. #1
    Join Date
    May 2005
    Posts
    60

    IE Prob (of course)

    can't figure out how to make fix this. on mouseover, my navbar gets taller to accomodate my hover properties.

    http://qualityjags.clarionwebdesign.com

    here is the css:
    Code:
    body
    	{
    		width: 100%;
    		height: auto;
    		color: #000;
    		margin: 0;
    	}
    
    /*Header tag (sets properties for title*****************************************************************/
    div.header
    	{
    		float: left;
    		height: auto;		
    		width: 100%;
    		margin-bottom: 5px;
    		padding: 0;
    	}
    	
    p.header
    	{
    		float: left;
    		font-variant: small-caps;
    		font-family: Arial;
    		color: #c00;
    		font-size: 150%;
    		font-weight: bold;
    		margin: 10px 0 0 5px;
    	}
    	
    h1
    	{
    		float: right;
    		text-align: right;
    		font-family: Arial;
    		font-variant: small-caps;
    		font-weight: bold;
    		color: #369;
    		font-size: 250%;
    		padding: 0;
    		margin: 0 5px 0 0;		
    	}
    		
    /*Primary ul tag (sets properties for area containing top nav bar)**********************************************/
    ul.nav
    	{
    		float: left;
    		height: 18px;
    		width: 100%;
    		background-color: #c00;
    		margin: 0;
    		padding: 4px 0 0 0;
    		list-style-type: none;
    		border-bottom: 1px solid #ccc;
    	}
    
    /*Primary li tag (sets properties for top nav links)*******************************************************/
    li.nav 
    	{
    		display: block;
    		float: left;
    		font-family: Times;
    		font-size: 90%;
    	}
    
    /*General link properties***************************************************************************************/	
    a
    	{
    		font-family: Times;
    		color: #000;
    		text-decoration: none;
    	}
    	
    a img
    	{
    		border: 0;
    	} 
    
    /*Top nav link properties***************************************************************************************/
    a.menu 
    	{
    		font-size: 100%;
    		float: left;
    		text-decoration: none;
    		border-right: solid 1px #000;
    		padding: 0 10px 0 10px;
    		color: #fff;
    	}
    	
    a.menu:hover
    	{
    		position: relative;
    		top: -4px;
    		color: #000;
    		background-color: #fff;
    		height: 12px;
    		padding: 4px 10px 0 10px;
    	}
    
    /*Link styles inside the main div element***********************************************************************/
    a.main
    	{
    		font-family: Arial;
    		text-decoration: none;
    	}
    
    a.main:link {color: #00c;}
    a.main:visited {color: #c00;}
    a.main:hover {color: #c00;}
    
    /*Link styles for the footer area of the page*******************************************************************/
    a.index
    	{
    		text-decoration: none;
    	}
    	
    a.index:link
    	{
    		color: #fff;
    		padding: 5px;
    	}
    a.index:visited {color: #000;}
    a.index:hover
    	{
    		padding: 5px;
    		color: #000;
    		background-color: #fff;
    	}
    
    /*Link styles for the footer area of the page*******************************************************************/
    a.footer
    	{
    		text-decoration: none;
    	}
    	
    a.footer:link {color: #fff;}
    a.footer:visited {color: #c00;}
    a.footer:hover  {color: #f00;}
    	
    /*This element defines the center of the page*******************************************************************/
    div.body
    	{
    		width: 100%;
    		height: auto;
    		padding: 10px 0 20px 0;
    		float: left;
    	}
    	
    /*Font def for promo box**********************************************************************************/
    p.promo
    	{	
    		float: left;
    		width: 220px;
    		padding: 0 0 0 20px;
    		font-family: Arial;
    		font-size: 90%;
    	}
    
    /*Defs for index box**************************************************************************************/
    div.index
    	{
    		
    		width:100px;
    		border: solid 2px #fff;
    		background-color: #ccc;
    		font-size: 85%;
    		list-style: none;
    		padding: 10px 0 10px 10px;
    		text-decoration: none;
    		margin: 10px 25px 10px 20px;
    	}
    	
    /*Defs for listing boxes**************************************************************************************/
    div.listcontainer
    	{
    		float: right;
    		width: 570px;
    		text-align: center;
    		font-size: 85%;
    		margin-top: 15px;
    	}
    	
    div.leader
    	{
    		width: 548px;
    		height: 21px;
    		background-color: #369;
    		color: #fff;
    		font-family: Arial;
    		font-size: 125%;
    		border: solid 2px #000;
    		margin: 0 0 0 20px;
    		padding: 4px 5px 0 5px;
    	}
    
    div.listing
    	{	
    		
    		width: 550px;
    		height: 105px;
    		border: solid 1px #000;
    		background-color: #ccc;
    		text-align: left;
    		list-style: none;
    		padding: 5px;
    		text-decoration: none;
    		margin: 10px 25px 0 20px;
    	}
    	
    img.listing
    	{
    		float: left;
    		padding: 2px 10px 0 2px;
    	}
    	
    p.listing
    	{
    		margin: 0;
    		height: 75px
    		text-align: left;
    	}
    
    a.listing
    	{
    		float: right;
    		padding-right: 5px;
    	}
    	
    a.listing:link 
    	{
    		color: #fff;
    		padding-right: 5px;
    	}
    	
    a.listing:visited
    	{
    		color: #fff;
    	}
    	
    a.listing:hover
    	{
    		color: #f00;
    		padding-right: 5px;
    	}
    
    /*Map page display properties***********************************************************/
    div.map
    	{
    		padding: 0;
    		
    	}
    	
    p.exdesc
    	{
    		text-align: left;
    		margin: 10px;
    	}
    	
    a.map
    	{
    		filter: alpha(opacity=50);
    		opacity: .5;
    	}
    	
    a.map:hover
    	{
    		filter: alpha(opacity=100);
    		opacity: 1;
    	}
    	
    a.button
    	{
    		margin-left: 20px;
    		float: left;
    		color: #000;
    		background-color: #999;
    		text-decoration: none;
    		text-align: center;
    		padding: 2px 15px 2px 15px;
    		border-top: 2px solid #ccc;
    		border-right: 2px solid #666;
    		border-bottom: 2px solid #666;
    		border-left: 2px solid #ccc;
    	}
    	
    a.button:hover
    	{
    		color: #fff;
    		background-color: #999;
    		text-decoration: none;
    		text-align: center;
    		padding: 2px 15px 2px 15px;
    		border-top: 2px solid #ccc;
    		border-right: 2px solid #666;
    		border-bottom: 2px solid #666;
    		border-left: 2px solid #ccc;
    	}
    	
    a.button:active
    	{
    		color: #fff;
    		background-color: #999;
    		text-decoration: none;
    		text-align: center;
    		padding: 2px 15px 2px 15px;
    		border-top: 2px solid #666;
    		border-right: 2px solid #ccc;
    		border-bottom: 2px solid #ccc;
    		border-left: 2px solid #666;
    	}
    		
    /*Footer properties*********************************************************************************************/
    div.footer
    	{
    		float: left;
    		position: relative;
    		background-color: #369;
    		width: 100%;
    		height: 25px;
    		font-size: 12px;
    		font-family: Times;
    		text-align: center;
    		margin: 0;
    	}

  2. #2
    Join Date
    Sep 2005
    Posts
    114
    The funny thing is it looks better in IE than in FF or Opera(where it looks particularily poor).
    Try fixing the HTML and CSS errors then take a look at this for the IE problem http://www.positioniseverything.net/...reepxtest.html
    Google and the manual are your friend. Use them!
    PHP
    MySQL
    CSS1 Specification CSS Validator
    HTML HTML Validator

  3. #3
    Join Date
    May 2005
    Posts
    60
    Quote Originally Posted by rincewind456
    The funny thing is it looks better in IE than in FF or Opera(where it looks particularily poor).
    Try fixing the HTML and CSS errors then take a look at this for the IE problem http://www.positioniseverything.net/...reepxtest.html
    what html and css errors? i am laying this out on mac and it looks exactly how i want it to in opera and firefox. also, after checking out that link, i am not really sure how this issue applies to my problem. does ie apply +3 pixels in all directions of the text or just to the left or right?
    Last edited by jerseydubs; 12-23-2005 at 10:43 AM.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Sep 2005
    Posts
    114
    Quote Originally Posted by jerseydubs
    what html and css errors? i am laying this out on mac and it looks exactly how i want it to in opera and firefox. also, after checking out that link, i am not really sure how this issue applies to my problem. does ie apply +3 pixels in all directions of the text or just to the left or right?
    Well in Opera and FF on my PC the content is off to the right so far that you have to scroll horizontally for it, in Opera nothing lines up and the prices appear outside the box edges.
    Google and the manual are your friend. Use them!
    PHP
    MySQL
    CSS1 Specification CSS Validator
    HTML HTML Validator

  6. #6
    Join Date
    May 2005
    Posts
    60
    i can't fix those errors because they don't exist in my html. i think Yahoo! (my web host) must insert html for their statistics collections i.e., site hits, retention, referrals, and commonly used os's and browsers. i will probably be leaving yahoo soon. i know, they are crap.

  7. #7
    Join Date
    May 2005
    Posts
    60
    Quote Originally Posted by rincewind456
    Well in Opera and FF on my PC the content is off to the right so far that you have to scroll horizontally for it, in Opera nothing lines up and the prices appear outside the box edges.
    i know what i am about to say may offend some of you but i am not concerned with anything other than IE/win right now. this is a very basic site for very basic users. i can almost garauntee that none of them are even aware of the existance of web browsers that are not called Internet Explorer or of the existance of Apple computers even.

    so, back to my original question. does anyone have any idea why the nav bar in the site referrenced above (css code included above) stretches out to accomodate the hover but is regularly the proper size?

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    ul.nav
    	{
    		float: left;
    		overflow:hidden;
    		width: 100%;
    		background-color: #c00;
    		margin: 0;
    		padding:0;
    		list-style-type: none;
    		border-bottom: 1px solid #ccc;
    	}
    
    a.menu 
    	{
        	        margin-top:4px;
    		font-size: 100%;
    		float: left;
    		text-decoration: none;
    		border-right: solid 1px #000;
    		padding: 0 10px;
    		color: #fff;
    	}
    	
    a.menu:hover
    	{  
        	        margin-top:0;
    		color: #000;
    		background-color: #fff;
    	}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Dec 2005
    Location
    Spencerport, NY USA
    Posts
    21
    Did Fang's code solve your problem? (your answer may help me, thanks!)
    No matter where you are, there you go
    Jim B at webdzyne

  10. #10
    Join Date
    May 2005
    Posts
    60
    Quote Originally Posted by jbdzyne
    Did Fang's code solve your problem? (your answer may help me, thanks!)
    i'm stuck with my laptop(mac) until tomorrow, but i will give it a wirl and let you know when i get to my office and i can test it on a pc.

  11. #11
    Join Date
    May 2005
    Posts
    60
    Quote Originally Posted by jbdzyne
    Did Fang's code solve your problem? (your answer may help me, thanks!)
    yes, this works. thanks fang. if you leave the 4px margin in on the a.menu then the link text will sit in the bottom of the ul and appear to "pop up" on mouseover. i did not like that effect so i removed the margin and now it is a simple color change on the mouseover.

  12. #12
    Join Date
    Dec 2005
    Location
    Spencerport, NY USA
    Posts
    21
    Jersey, thanks for the update. Here's a very cool menu-bar I came across at A List Apart, from the designer of my Blog template, Douglas Bowman. Thought you might enjoy this one.
    No matter where you are, there you go
    Jim B at webdzyne

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles