SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav Causes Earthquake & Browser Differences

    Two +1 problems this time around and once again thanks for helping this non-professional. I really have studied all this before hand. It makes such sense in the videos but it just seems to not work for me. I'm cursed?

    I've put the site up on the net: See it here.

    First: In the upper right corner in the div topright nested inside the div top, I have a 3 line address and an anchor / link to email me.
    In FireFox it is all well and good. In Safari the line breaks are not recognized. Should this be done as an unordered list?

    Second: I put in a nav bar what shows a bottom border when in the Hover state. This causes everything below it to move down. Looks like an earthquake to me. How to prevent this?

    Third (pushing my luck): Under the #navcontainer div is the #label div that I've given a puke green background so that I can see where it is. I've stuck some text into it.
    In Firefox the text has strange breaks in it I can't explain. In Safari strange break and aligns to the right. I should have some kind of header or paragraph property connected to the text? Tried that but didn't seem to help.

    All help and criticisms are welcome. I really did study texts and videos before embarking on this. Sorry if I seem just the dumb nuub.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New Norway Template</title>
    <style type="text/css">
    
    
    
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	background: #c56065;
    	background-image:url(images/backgroundbase.png);
    	background-repeat:repeat-x;
    	
    }
    
    
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    	padding: 0;
    	margin: 0;
    } 
    
    
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    	/*padding-right: 15px;
    	padding-left: 15px;*/ /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    	color: #42413C;
    	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    }
    a:visited {
    	color: #6E6C64;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds all other elements ~~ */
    .container {
    	width: 960px;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    	padding: 0;
    	background-image: url("http://www.sitepoint.com/forums/images/people.png");
    	background-repeat: no-repeat;
    	background-attachment:fixed;
    	background-position: 50% 0px;
    	
    }
    
    
    #topleft {
    	font-family: georgia, times, serif;
    	font-size:36px;
    	font-style:oblique;
    	color:#c56065;
    	Float: left;
    	width: 450px;
    	text-shadow: 2px -2px 1px #666;
    	text-transform: uppercase;
    }
    
    #topmiddle {
    	font-family: georgia, times, serif;
    	font-size:20px;
    	font-style:normal;
    	width: 225px;
    	float: left;
    	margin-top: 15px;
    	text-shadow: 2px -2px 1px #c56065;
    	
    	
    }
    
    
    #topright {
    	font-family: georgia, times, serif;
    	font-size:12px;
    	font-style:normal;
    	margin-top: 5px;
    	float:right;
    	
    }
    
    
    #navcontainer {
    	position:relative;
    	top:10px;
    }
    
    
    #navcontainer ul
    {
    	padding-left: 0;
    	margin-left: 0;
    	color: White;
    	float: left;
    	width: 100%;
    	font-family: arial, helvetica, sans-serif;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    	padding: 0.2em 1em;
    	color: White;
    	text-decoration: none;
    	float: left;
    	border-right: 1px solid #fff;
    	
    }
    
    #navcontainer ul li a:hover
    {
    	
    	color: #fff;
    	border-bottom: 5px solid #c56065;
    	padding-bottom:2px;
    }
    
    
    #label {
    	
    	position:relative;
    	top:200px;
    	background-color:#CCFF99;
    	text-align:left;
    	
    	
    }
    
    
    .content {
    
    	padding: 10px 0;
    	position:relative;
    	top:200px;
    }
    
    
    
    
    </style>
    
    </head>
    
    
    
    
    
    
    
    
    
    
    <body>
    
    <div class="container">
    
    
    			<div id="top">
        
      <div id="topleft"> 
        		Kiropraktikk First
        
    	</div>
    
    			<div id="topmiddle"> 
    
        		Helse For Hele Familien
        
    	</div>
    
    			<div id="topright"> 
    
        		Radmann Halmrasts vei 18</br>
    			1337 Sandvika, NORWAY</br>
    	  		Tel: xxx-xxxx-xxxx  <a href="mailto:drgarylgreen@gmail.com">EmailUs. Click Here</a>
                
                
    	</div>
        
    </div>
    
    
    
    <div id="navcontainer">
    	<ul id="navlist">
    		<li id="active"><a href="#" id="current">Item one</a></li>
    		<li><a href="#">Item two</a></li>
    		<li><a href="#">Item three</a></li>
    		<li><a href="#">Item four</a></li>
    		<li><a href="#">Item five</a></li>
    	</ul>
    </div>
    
    
    	<div id="label">
        
        	<h3>Let's see how this looks once it is on the page.</h3>
    
    </div>
    
    
      <div class="content">
      
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h2>Layout</h2>
        <p>Since this is a one-column layout, the .content is not floated. If you add a .footer within the .container, it will simply follow the .content div. </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        
        </div>
        
        <div class="footer">
        
        
    </div>    
        
      </div>
      
    </body>
    </html>

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, the drop from hovering is that you are adding a border to something that didn't have one -- this automatically changes it's height. I'm also seeing some layout stuff not lining up due to the menu font being set to dynamic, when everything seems to expect that to be a certain size.

    You use several properties I advise against even trying -- background-attachment:fixed for example is unreliable, font-style oblique just gives you italic in 90% of browsers and does nothing in others, so just use italic, you've got a H3 before the H1 which makes no sense whatsoever... and I suspect that #navcontainer, #label, and #top are all unnecessary DIV.

    I would also suggest getting the CSS out of the markup -- if you have a GOOD editor that lets you do more than one editor window at once, you could set the markup side-by-side with the CSS (part of why I like multiple displays) making it easier to edit.

    You've broken up a reset in kind-of an odd fashion across the page -- Just get it all together up top instead of spreading it out like that. You are also declaring default values on several elements (like anchors) and wasting time saying :link... if you said just "a", you'd not have to say the underline on :visited. (not that you should need to say either).

    I would also advise switching to a modern doctype instead of being in transition from 1997 to 1998... That way you aren't tempted to write HTML 3.2, slap a tranny doctype on it and claim to be up to date.

    I would also find another way to manage that 'highlight' effect than using that alpha transparent .png -- at 88k that one "people.png" file is larger than my ideal target size for an entire PAGE -- that's HTML + CSS + Scripts + images. Precompositing the image may work, it may also be worth looking into CSS3 gradients, though across browsers that particular bit really isn't ready for prime-time yet.

    For starters, let's clean up the markup -- CSS is only as good as the markup it's applied to.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	New Norway Template
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		<span>Kiropraktikk First</span>
    		<small>Helse For Hele Familien</small>
    	</h1>
    
    	<div class="topContact">
    		Radmann Halmrasts vei 18</br>
    		1337 Sandvika, NORWAY</br>
    		Tel: xxx-xxxx-xxxx	<a href="mailto:drgarylgreen@gmail.com">EmailUs. Click Here</a>
    	</div>
    
    	<ul id="navlist">
    		<li id="active"><a href="#" id="current">Item one</a></li>
    		<li><a href="#">Item two</a></li>
    		<li><a href="#">Item three</a></li>
    		<li><a href="#">Item four</a></li>
    		<li><a href="#">Item five</a></li>
    	</ul>
    
    
    	<div class="content">
    
    		<h2>Instructions</h2>
    		<p>
    			Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.
    		</p>
    
    		<h2>Layout</h2>
    		<p>
    			Since this is a one-column layout, the .content is not floated. If you add a .footer within the .container, it will simply follow the .content div.
    		</p><p>
    			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    		</p>
    
    	<!-- #content --></div>
    
    	<div class="footer">
    	<!-- #footer --></div>
    
    </body></html>
    Is roughly how I'd code that same page. Notice a goodly number of those DIV went away.

    Gimme a bit, and I'll toss together some CSS to go with that, and see if I can't get your image size under control too.

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the speedy reply. I'm going to have to read through this and digest it. The site I was attempting to emulate is

    Our Houma Office - Houma Chiropractor - Flynn Clinic of Chiropractic - Chiropractors in Houma, LA

    I think I'm going to have to give that dream away or else go back to laying out with tables which I don't want to do. I'll be interested in what else you have to say, thank you again. This page is a pre-built from Dreamweaver and then I looked up some code on another site for the nav bar. I was trying to not do the spry navbar that comes with Dreamweaver, just do as much as I could with XHTML and CSS.

    Looking forward to your next post. Thank you.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Going through deeper, a LOT of your problems seem to stem from using "top:200px" on things that shouldn't be relative positioned -- that's padding or margin's job on this type of layout.

    ... and duh, can't believe I didn't notice this sooner. You've got your slashes in the wrong place for your BR. It's <br />, NOT </br> -- XHTML self closing tag. </br> is ignored. That's why your address wasn't breaking into multiple lines.

    Here's what I came up with:

    New Norway Template

    as with all my examples the directory:

    Index of /for_others/g2g2

    is unlocked for easy access to it's bits and pieces.

    Valid XHTML 1.0 Strict, tested working IE 5.5, 6, 7, 8 and 9, Firefox 3.5 and 4, and the latest flavors each of Opera, Safari and Chrome. (naturally in IE8- you don't get the CSS3 stuff).

    Apart from the incorrect BR, I think a lot of your issues stemmed from trying to use position:relative with the "top" attribute to do padding or margin's job. As a rule of thumb relative positioning with the top/bottom/left/right attributes (and even absolute positioning with same) should be doled out with an eye-dropper. Don't try to fight "flow" -- let flow do it's job.

    Oh, and notice on the menu how I give the anchors extra bottom padding then a negative margin. This lets them 'pop out' of the menu to the proper height. When you hover, it decreases the padding by five px and adds the border... which puts a stop to the whole 'jumping up and down' on hover.

    On the image front, pre-compositing that "people" png with the background and saving it as 256 color dropped the size to 28k from the original 98k, the tiled background by getting rid of alpha transparency and optimizing the size I took from 12k down to 263 bytes... Which with the k or so less code results in a reduction of the page to about a third your original size.

    Hope this helps.

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It will, I'm sure. Being a touch dyslectic doesn't help with trying to remember where all the slashes go. Glad you spotted that. Thanks again and now let me set down with this and digest it. HTML and CSS are still a foreign language to me.

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question: I googled for info on both -webkit-text-shadow and -moz-text-shadow and found nothing.

    Obviously they are to give me the text shadow of the other css command but I'm wondering if they are mozzilla specific or specific for another browser?

    Thanks again.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by G2G2 View Post
    Obviously they are to give me the text shadow of the other css command but I'm wondering if they are mozzilla specific or specific for another browser?
    The -moz and -webkit prefixes are to target those two browser engines specifically; they don't actually support the proper CSS3 properties without them as they still consider them "in testing"; As a rule I dislike using anything that requires those prefixes as it's really stupid to have to say everything three times... but with IE9 in the picture I'm willing to give those elements a chance. (reversing my stance on them from two months ago)

    -moz is indeed for mozilla, or more specifically gecko based browsers like Firefox or Iceweasel.... -webkit pretty much means Chrome and Safari.

    TECHNICALLY if you are using those prefixes it means "for testing only" and "not ready for deployment" -- but if they behave the same as they do without the prefix in at least two other browsers, that's the point I'm willing to say "ok, it's go time". In this case, neither Opera or IE9 require prefixes to work on any of those properties, so it's ok to use. It's part of why I like to joke that neither Gecko or Webkit based browsers actually support CSS3 yet. (while IE has "supported" many CSS3 "features" since IE5)

    I'd complain about the extra CSS being bloat, but when it's under 100 bytes extra CSS to avoid using a 16k image, the choice is easy.

    A word of warning about those though -- apply CSS3 shadows with an eyedropper in your layouts. Many browsers (FF and Safari for example) are dragged to a crawl if you use them too much. It's like the old problem of a fixed background in Firefox where scrolling becomes painful. You start using too many mouse-over effects with text-shadow and on slower machines a site can be annoyingly slow and even unusable in Firefox (love that 100% of one core use to render a hover)... Used sparingly they can transform a site for the better-- used to excess they can bury a site in some browsers.

    It's actually really funny in that regard that IE9 makes FF look like a blind old dog that needs to be put down. It doesn't support as many CSS3 properties, but at least using them doesn't drag the browser to a crawl. I suspect on FF's part it's just more of what I've been saying about all the browsers all along-- MAYBE you should get the stuff you already implemented working PROPERLY BEFORE moving on to adding something new? (see how there are still gaping holes in HTML4 and CSS 2.1 in many of these browsers wasting time on HTML 5 and CSS3)

    But after all, we are talking the browser engine that took 8 years to go from display:-moz-inline-block; to an actual display:inline-block; and still has a twelve year old layout old bug in it's HTML 4 implementation... (bugzilla 915 says Open source just whooped it's own ass)

  8. #8
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who's complaining? I'm just trying to understand. I also don't get the whole negative margin thing but I know it was discussed on one of my "How To..." videos so I'm going to dig that up and watch again.

    Isn't it a bit late at night in your part of the world?


Bookmarks

Posting Permissions

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