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.
Results 1 to 8 of 8

Thread: Browser help!

  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browser help!

    Hi guys, I know you've probably had this one before but I was hoping you can help out a novice. I'm having 'spacing' issues with my site when viewed in different browsers and would simply like it to be accurately displayed in IE, Mozilla and Safari... is this possible? I'm currently using a table format.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    A link to your site (or your full HTML and CSS code) would be helpful. But from the description you provide, it sounds like you might need what's called a CSS reset, which simply "zeroes out" the default margin and padding settings, which differ from browser to browser. Try adding this to the beginning of your CSS and see if it makes a difference:

    Code:
    * {
      margin:0;
      padding:0;
    }
    (the * is a wildcard and means "everything")

    Also, read up on why tables for layout is dumb. It's an antiquated paradigm whose heyday was ten years ago.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That doesn't seem to work guys. Could it be an hidden scroll bar in the lower frame??

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Read what msuffern said at the end along with www.yourhtmlsource.com/frames/goodorbad.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I haven't been very active in this subforum lately, so I thought I'd code this one out. Apologies to the regulars.

    @OP: Dunno why you have all the frames within frames. It took me a while to dig deep enough to find your source code. Check abduraooft's link for why frames are almost always a bad idea.

    Give this a try:

    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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Untitled</title>
    	
    	<style type="text/css">	
    	
    		* {
    			margin:0;
    			padding:0;
    			font-size:100%;
    		}
    		
    		body {
    			font:0.6em Arial, Helvetica, sans-serif;
    			color:#00aeef;
    		}
    		
    		
    		a:link, a:visited, a:active, a:hover { 
    			color: #00AEEF; 
    			text-decoration: none;
    		}
    		
    		a:hover { 
    			text-decoration: underline;
    		}
    	
    		#wrap {
    			width:263px;
    			margin:10px auto 0;
    		}
    		
    		h2 {
    			color:#fff;
    			background-color:#00aeef;
    			text-align:center;
    			text-transform:uppercase;
    			margin:10px 0;
    		}
    		
    		ul {
    			list-style:none;
    			width:100%;
    			overflow:auto;
    		}
    		
    		li {
    			display:block;
    			float:left;
    			width:20%;
    			text-transform:uppercase;
    		}
    		
    		#center_nav_link {
    			text-align:center;
    			width:60%;
    		}
    		
    		#right_nav_link{
    			text-align:right;
    			float:right;
    			width:19%;
    		}
    	
    	</style>
    	
    </head>
    
    <body>
      
    <div id="wrap">
    
    	<ul id="nav">
    		<li><a href="#">About</a></li>
    		<li id="center_nav_link"><a href="#">Work Examples</a></li>
    		<li id="right_nav_link"><a href="#">Contact</a></li>
    	</ul>
    	
    	<h2>About</h2>
    	<p>My name is Simon - a Freelance Writer / Photographer based in London. I'm a creative thinker with a willing attitude and the ability to generate new and exciting ideas. Importantly, I'm energetic and hard working; continually making  refinements to my work, challenging problems and enthusiastically tackling new projects.</p>
    
    	<h2>Writing</h2>
    	<p>I specialise in automotive and lifestyle subjects (it's what I know best); offering professional writing, copywriting, editing, marketing and PR services across each field. I contribute regularly to some of the major magazine titles and have compiled equally as engaging editorial for the internet and other media.</p>
    
    	<h2>Photography</h2>
    	<p>I'm inspired by reality and fascinated by the concept of freezing time - pictures are just great! I like to explore new environments, work with varied subjects and create exciting images by focusing on the things most people would overlook. I'm eager to discuss any type of commercial work and always open to new opportunities that will help expand my portfolio.</p>
    
    </div>
    	
    </body>
    </html>
    A few things to notice:

    - Notice how dirt-simple the actual HTML is. There's no clutter describing how to present the content; all of that has been moved to the CSS.
    - The HTML is semantic, meaning the tags actually describe what they do (a table's not a table when you're using it for general page layout). An <h2> is an actual subheading and a <ul> is an actual unordered list.
    - I used the universal reset (described in my first post of this thread) at the top of the stylesheet to set some properties right off the bat.
    - I make use of CSS shorthand throughout the stylesheet.

    This is a good place to go to learn HTML and CSS.
    matt | design | blog

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, thanks for that msuffern! I've noticed the menu bar is incorpoorted into the same page - is this better than using frames? Shall I simply insert the menu on each of the linked pages?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Shall I simply insert the menu on each of the linked pages?
    That's one way. If you have many pages, and if you think you will need to make some changes in the structure of your navigation, you could use some server side including techniques (to make the entire process easier).

    Say, in PHP you could use include() function to include a file containing the markup of your navigation bar into any php page. Thus if you make any changes to that file which is getting included, it'll be reflected on all the pages you have.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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