63 users online (1 members and 62 guests)  


  Results 1 to 5 of 5

Related

  1. Problem with margin in CSS    Forum: CSS Forum
    Replies: 7
  2. Margin?    Forum: CSS Forum
    Replies: 4
  3. profile layout problems..alternate browsers    Forum: Myspace Forum
    Replies: 0
  4. Browsers ---- HELP!!!    Forum: HTML Forum
    Replies: 6
  5. web page margin    Forum: HTML Forum
    Replies: 16
  1. #1
    Blelisa's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Feb 2004
    Posts
    26

    Wacky margin layout across browsers

    Hi everyone,

    I am building a site which consists of two columns in CSS and Html. I am checking cross browser capadability with IE7 and Firefox. When I am coding may page then save it then open it with a browser it looks one way, then when I ftp my site up to my hosting server and check it on the web, it looks totally different. What is happening?

    Also my margins are off between Firefox and IE any one know of a work around?

    Thanks in advance for any help.

    PS I you want to see what I am speaking of and my code the path is:
    http://www.hemisphere.net/testing/index.html

    The code from my .css page is:
    Code:
    body {width: 850px; 
          margin-top: 0; 
          margin-left: auto; 
          margin-right: auto; 
          font-family: arial, sans-serif; 
          font-size: small;}
    
    .logo {float: left;
           right-padding: 15px;
           padding: 15px;}
    
    .link {border: 0;}
    
    #header {background-color: #FFFFFF;
    	 padding: 0px;}
    
    #left {float: left;
           width: 100px;
           padding: 10px;}
    
    #right {float: right;
            width: 200px;
            padding: 5px;}
    
    #center {margin-right: 265px;
    	 margin-left; 265px;
             padding: 8px;
    	 border-right: #000000;
             text-align: center;
    	 background-color: #FFFFFF;}
    
    #footer {clear: both;
            text-align: center;}
    
    #footer2 {clear: both;
             background-color: #FFFFFF;
             width: 800px;
             margin-left: auto;
             margin-right: auto;
             margin-top: 100px;
             text-align: center;
             padding: 5px;}
    
    #ctext {text-align: center;}
    
    .headingl1 {font-family: arial;
                font-color: #FFFFFF;
                font-weight: bold;
    	    text-align: center;
                background-color: #000099;
    	    border-color: red;
                padding: 2px;}
    
    
    #headpic {width: 844px;
              height: 180px;
              align: center;}
    
    .greet {font-size: large;
            font-weight: bold;
            color: red;
    	text-align: center;}
    
    .greet1 {font-size: large;
            font-weight: bold;
            color: red;
    	text-align: left;}
    
    .leftcolumn {float: left;
    	     width: 100px;
    	     margin-left: 0%; 
    	     margin-right: 5%;}
    
    .middlecolumn {float: left;
                   width: 1%;
    	       padding: 1px;}
    
    .middlecolumn2 {float: right;
                   width: 1%;
    	       padding: 1px;}
    
    .heading1 {font-family: sans-serif; 
               color: red;
    	   text-decoration: underline; 
    	   font-size: 16px; 
               text-align: left; 
               font-weight: bold;
               margin-top: 12px;}
    
    #lisa {text-indent: 1in;}
    
    #lisa1 {text-indent: .50in;
            float:left;}
    
    .firstletter {color: #COCOCO;
    	      font-size: large;
                  font-weight: bold;}
    
    .pheading {color: navy;
    	   font-size: large;
    	   font-weight:bold;
    	   border-bottom: 1px solid #000066;}
    
    #menu {
    	float: right;
    	text-align: center;
    }
    #menu div {
    	display: block;
    	width: 70px;
    	float: left;
    	border-left: 1px solid black; 
    }
    
    #menu a:link, a:visited, a:active {text-decoration: none;
                  			   color: #000000;
                  			   font-weight: bold;
    }
    
    #menu a:hover {color: #ff0000;
    }
    
    .bold {font-weight: bold;
           font-size: medium;  
           text-indent: 1in;}
    
    .indent {text-indent: 1in;}
    
    #navcontainer a  {color: #000066;
    		  display: block;
                      padding: 3px;
                      text-decoration: none;
                      border-bottom: 1px solid #000066;}
    
    #navcontainer a:visited {text-decoration: none;
                             font-weight: normal;}
    
    #navcontainer a:hover {background-color: #000066;
                           color: #ffffff;}

  2. #2
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Wacky margin layout across browsers

    well... as for the looking different from a server rather than on your computer is mostlikely an image or a link to a file that is not on your computer causing it to look a little different. you can use the <base tag in the header to set the base of the page if it is that important.

    anyway as for it looking different from IE7 to Firefox... well i cant see what you mean... the only difference i saw was the text in the middle is just a hair bigger/smaller between the two and the padding between the two are off by just a fraction.

    other than that the site looks great!... if there is somthing else just do a print screen and show us what you get.

    -ALL

  3. #3
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Wacky margin layout across browsers

    Also, the mistake that I always make when developing is forgetting to refresh properly - cached pages always give me a headache.
    Always double check by closing all browser windows and reopening them before a final viewing - and use CTRL-F5 not F5 to refresh on IE (dunno if that's the same in Firefox)

  4. #4
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Wacky margin layout across browsers

    Actually there is a really really cool plugin for firefox for web developers... i use it all the time called "Web Developer"

    here is a link:
    https://addons.mozilla.org/firefox/60/

    anyway the reason i like it so much is because you can turn off caching, images, javascript, cookies, redirects, meta redirects, exc...

    it also gives alot of thins like...
    Add Cookie, View Cookies, Disable Images, View Responce Headers, Display window size, Resize window (to check for different screen res'es...

    and my personal favorite... "View Generated Source"

    if you are a javascript scripter... it can be very frustrating trying to figure out what source it is createing... this displays all html including the javascript created html.

    it is way worth it!

    -ALL

  5. #5
    Office Angel's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Location
    USA
    Posts
    4

    Re: Wacky margin layout across browsers

    One thing that can really make a huge difference in layout appearance accross different browsers is Padding. IE and Geicko browsers handle them completely different by placing padding outside borders and the other browsers placing padding inside borders.
    Avoid using padding and use margins alone whenever possible and set padding to zero where you do not need it as some browsers automatically add padding to certain tags if padding is not defined.



Tags for this Thread