3 Replies - 810 Views - Last Post: 31 January 2013 - 02:36 PM

#1 Bladerade  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 31-January 13

Browser Compatibility with nav bar's?

Posted 31 January 2013 - 01:11 PM

Hey guys, heard a lot of great stuff about your community so decided to try posting because I'm at wits end with this website.

the website can be found at www.myweb.lethbridgecollege.ab.ca/~s0432623 sorry for the long address, its a school thing.

If you look at it in Firefox, you'll see what I hope is a visually appealing navigation bar.....if you look at it in anything else, however....the navigation bar in particular is awful.

Everything is in em's and I was told that would fix it...but it didn't.

This is my html code for the banner and nav:


<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Blade Upton's User-Centered Interface Design</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>


<div id="banner">

Blade Upton's User-Centered Interface Design
<p id="subh2"> (Design and Title Subject to Change) </p>


<ul id="nav">
	<li><a href="#">Blog</a></li>
	<li><a href="#">Movies</a></li>
	<li><a href="#">Video Games</a></li>
	<li><a href="#">Whatever</a></li>
	<li><a href="#">Home</a></li>
</ul>


</div>





The css I'm sure u can see in your browser. Is there anyway I can make this look pretty in IE and Chrome specifically (everything else including mobile would be nice as well).

Thanks, hope I gave enough info. :)/>

Is This A Good Question/Topic? 0
  • +

Replies To: Browser Compatibility with nav bar's?

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Browser Compatibility with nav bar's?

Posted 31 January 2013 - 01:32 PM

Your website is not available. Please post your CSS.

BTW You will find that very few websites use ems. There is nothing intrinsically wrong with ems but they, I suspect, need to be applied consistently throughout the page; that is, so that everything is kept in proportion.

Added: You might use pixels for element dimensions (height, etc.) and ems for all/most font measures.

This post has been edited by andrewsw: 31 January 2013 - 01:44 PM

Was This Post Helpful? 0
  • +
  • -

#3 Bladerade  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 31-January 13

Re: Browser Compatibility with nav bar's?

Posted 31 January 2013 - 01:49 PM

View Postandrewsw, on 31 January 2013 - 01:32 PM, said:

Your website is not available. Please post your CSS.

BTW You will find that very few websites use ems. There is nothing intrinsically wrong with ems but they, I suspect, need to be applied consistently throughout the page; that is, so that everything is kept in proportion.

Added: You might use pixels for element dimensions (height, etc.) and ems for all/most font measures.



sorry...the web address is http://myweb.lethbri...b.ca/~s0432623/ no "www"


this is the CSS for the nav bar and banner.


#banner{
	text-align: center;
    color: LightSlateGrey;
    font-family: Impact, Charcoal, sans-serif;
    font-size: 3.5em;
	border-style: ridge;
	border-width: .2em;
	border-color: black;
	background-color: DarkSlateGrey;
	padding-top: 1.4em;
	padding-bottom: 1.4em;
    margin-right:3em;
    margin-left:3em;
}

#nav {
	width: 24.2em;
	overflow: auto;
	font-size: .45em;
	float: right;
	margin-left: 7em;
	padding: 0;
	list-style: none;
	background-color: LightSlateGrey;
	clear:both;
	
}





#nav li {
	float: right; }

#nav li a {
	display: block;
	padding: .3em .515em;
	text-decoration: none;
	font-weight: bold;
	color: DarkSlateGrey;
	border-top: .3em ridge black; 
	border-left: .43611em ridge black;
	}

#nav li a:hover {
	color: DarkSlateGrey;
	background-color: #fff; }
	



Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Browser Compatibility with nav bar's?

Posted 31 January 2013 - 02:36 PM

Your UL is not wide enough to contain the LI blocks! Added: That is, to contain the combined width of your LIs - including padding, borders and margins.

The default body font-size in Chrome is 16px and your em measurements are determined relative to this value.

A common setting to correct this is:
body { font-size: 62.5%; }

but this would require you to adjust all your current measurements (and still to increase the width of the UL).

Hint: Allow a little breathing-space in your calculations; browsers are subject to rounding errors. This is particularly relevant with em (relative) measurements.

This post has been edited by andrewsw: 31 January 2013 - 02:39 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1