6 Replies - 667 Views - Last Post: 18 February 2014 - 03:08 PM

#1 expedition_code  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 18-February 14

CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 12:24 PM

Hi all,

I'm having a CSS layout issue, but only in Chrome. Works fine in FF, Safari, Camino.

http://www.expeditionwild.com

The "nav" div won't accept font sizing and I can't figure out why. Not sure if the issue is a conflict with the "body" div or something else. Here is some code that I have been editing:



.nav{
	color:#000;
	display:block;
	font-size:1.1em;
	font-weight:normal;
	margin-bottom:1px;
	position:relative;
	text-decoration:none;
	width:125px;
	padding-top: 5px;
	padding-right: 2px;
	padding-bottom: 5px;
	padding-left: 10px;
}




I can post more code if need be.

Thanks for any help on this.

E_C

Is This A Good Question/Topic? 0
  • +

Replies To: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3809
  • View blog
  • Posts: 13,518
  • Joined: 12-December 12

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 12:33 PM

You don't have a div with class-name 'nav', the main navigation has the id of 'nav'.

You have a-links with class-names 'nav sub' and some of the css-rules for .nav are over-ruled by those for .sub.

I discovered this by using the developer tools in Google Chrome; the first step is to right-click and choose 'Inspect element'. You need to get to understand these tools - there are links in my signature.
Was This Post Helpful? 0
  • +
  • -

#3 expedition_code  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 18-February 14

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 01:02 PM

Hi there,

thanks for the input. I rt. clicked and made the changes to the #nav a sizing, and now it is sized properly in Chrome, but is tiny in FF, Safari and Camino. This is the problem I am having, when I change it to work in one browser, it is either huge or tiny in the others.

I read your other ideas,but to be honest, I am not sure what they mean I should do? Should I add a nav div or add it again?

E_C
Was This Post Helpful? 0
  • +
  • -

#4 expedition_code  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 18-February 14

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 01:11 PM

Here is the code for the top on my page, showing the nav div:

<div id="sitename">
 

<a id="menu"></a>
</div>

<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="expedition_wild_photo_expeditions.html">The Expeditions</a></li>
<li><a href="expedition_wild_what_how_who.html">What,  How &amp; Who</a></li>
<li><a href="expedition_wild_wildlife_photography_instruction.html">Photography Instruction</a></li>
<li><a href="expedition_wild_trip_logistics.html">Trip Logistics</a></li>

</ul>
<p class="hide"><a href="#top">Back to top</a></p>
</div>


This post has been edited by andrewsw: 18 February 2014 - 01:28 PM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3809
  • View blog
  • Posts: 13,518
  • Joined: 12-December 12

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 01:33 PM

Your div has an id so you can create specific rules using it, that will not be over-written by other class-name based rules. You can use

#nav ul {
    /* and/or #nav li */
}
/* and/or */
#nav a {

}

Put whatever specific css-rules you need for your nav-bar within these selectors.
Was This Post Helpful? 0
  • +
  • -

#6 expedition_code  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 18-February 14

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 01:48 PM

OK, I added this to the css file:

#nav{
	color:#000;
	display:block;
	font-size:1.2em;
	font-weight:normal;
	margin-bottom:1px;
	position:relative;
	text-decoration:none;
	width:740px;
	padding-top: 5px;
	padding-right: 2px;
	padding-bottom: 5px;
	padding-left: 10px;
}



To be honest,I am still completely baffled here. When I adjust the font size for the nav buttons, it still comes out wrong in the other browsers and it also changes the font size for the body text. should I delete the font sizing for the body text so it is not conflicting?
Was This Post Helpful? 0
  • +
  • -

#7 expedition_code  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 18-February 14

Re: CSS layout issue on nav bar in Chrome ONLY - won't accept font siz

Posted 18 February 2014 - 03:08 PM

Is there anyone else who can help out a beginner here or suggest a place for CSS/HTML beginners? Thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1