[skalie]

Does Safari have an issue with margin:auto? First cross browser test and everythings on the left.

Code:

#frame {
	width: 			750px;
	margin-right:	auto;
 	margin-left:	auto; 
}

Code:
<div id="frame">
 content
</div>

[philzilla]

Safari is usually cool with that. have you read this?

CSS Centering 101

that should answer any questions you might have about cross-browser centering.

[registered_user]

add units of measure like so:

margin-left: 0 auto;
margin-right: 0 auto;

[skalie]

No luck yet.

[Synotic]

You're code seems to work fine for me... do you have a specific example?

[skalie]

OK, made some progress, as in I've broken it for IE 6 win now as well.

Example
Css file

[registered_user]

That doesn't work in Firefox or Safari for me.

anyway.

Here are a few tips:

• Output css with line breaks so it's legible. I'm not even going to try to read that css you have, and I'm not sure anyone can read it effectively enough to realistically troubleshoot.
  
• Validate your markup. If your markup doesn't validate because of things like no alt tag, fine. But you have headlines inside of paragraphs, and you are using ids more than once and that sort of error can cause problems.
  
• use text-indent instead of nbsp;nbsp;nbsp;nbsp; (That will be easier once each paragraph is wrapped in <p></p> tags, and the <h*> tags are out of the paragraphs.
  
• use the code below for a stylesheet and see if it works. If it doesn't, then your problem is most likely that you aren't calling the stylesheet properly.

Code:
body {
background: #666;
margin: 0; padding: 0;
}

#frame {
background: #fff;
width: 700px;
margin: 0 auto; padding: 0; 
border: 1px solid red;
}

[skalie]

Thanks for the tips and yes, it's working.... example2

The purpose of the thread, to eliminate whether it was a Safari issue or not is achieved, now I can troubleshoot elsewhere.

A few points in my defense, the site is a mock up for a team to agree with or discard, the other designer simply submitted a mock-up from Photoshop.

I decided to use css for my mock-up as a learning experience and also because a "text-only" version is eventually required, as seen in that last link.

The css comes out like that because it is generated by php, letting me use variables for colours and fonts, and I'm also using seperate files for each resolution, so I can tweak the positioning by changing a few numbers, rather than try on my first go, at making something that automatically fits all resolutions.

The actual .css file is written using Htdocs, so is very easy to oversee, as in..

Code:
<?php
echo >>>stylesheet_layout
body {
         background: #666;
         margin: 0; padding: 0;
}
stylesheet_layout;
?>

One interesting thing is that transferring the real demo from my works server on to my own broke the center alignment on IE 6 for windows, which raises the question if there might be something in the configuration of the php that might be playing its part.

As far as the "nbsp;nbsp;nbsp;nbsp;" goes, once again it was for the mock-up, a last minute design tweak. I will definately be returning to this thread if my design (what I showed here is without Logo's etc.,) is accepted, and then start over new making sure I get everything right from the start.

[skalie]

For what it's worth, here are the stylesheets (written in php)

For resolution 1024

Code:

<?php
// variables that change with resolution

// main frame
$main_frame_height = "550px"; 
//menu
$menu_top = "20px";
// boxes
$box_left_margin_top = "60px";
$box_center_margin_top = "30px";
$box_right_margin_top = "140px";
$box_right_height = "235px";
// logos relative positions
$logo_top_right_margin_top_relative = "-20px";
$logo_top_right_margin_side_relative = "6px";
$logo_bottom_left_margin_top_relative = "28px"; 
$logo_bottom_left_margin_side_relative = "0px"; // position in the html is important
$logo_bottom_right_margin_top_relative = "20px";
$logo_bottom_right_margin_side_relative = "px";
// boxes relative postitioning
$box_left_margin_top_relative = "100px";
$box_right_margin_top_relative = "-20px";
$box_address_margin_left = "60px";
$box_address_margin_top = "40px";
include "css_browser_inc.php";
?>

Then the common included stylesheet...

Code:
<?php

$font_family = "Verdana, Arial, Helvetica, sans-serif";
$font_menu = "96% Verdana, Arial, Helvetica, sans-serif";
$font_colour_black = "#000000";
$font_colour_green = "#009900";
$border_colour_black = "#000000";
$background_blue = "#E7F2FB";
$border_blue = "#3366CC";
$mouseover_background_light_blue = "#83CEFF";
$menu_bar_blue = "#3366CC"; // also link "active"
$box_background_blue = "#E7F2FB";
$highlight_yellow = "#F8F049";
$double_arrow_red = "#CC0000";

// here's comes the php, watch out how you place the comments, use /*.........*/

echo<<<PHP
#frame {
	width: 			750px;
	height:			$main_frame_height;
	margin-right:	0 auto; 
	margin-left:	 0 auto; 
	margin-top:		0px;
	padding:		0px;
	}
h2 { 
	font			:  $font_menu;
	text-decoration	:  none; 
	color			:  $border_blue;
	font-size       :  180%;
}
h4 { 
	font-family		:  $font_family;
	text-decoration	:  none; 
	color			:  $border_blue;
	font-size       :  140%;
}
a { 
	font			:  $font_menu;
	text-decoration	:  none; 
	color			:  $border_blue;
}
#gaeilge_text_only{
	position:relative;
	font-family: 	$font_family;
	color: 			$border_blue;
	margin-top:		10px;
	margin-left:	270px;
	font-size: 		100%;
}
#welcome_text{
	font-family: $font_family;
	color: $ncge_menu_bar_blue;
	font-size: 200%;
	}
#box_under_menu{
	position:relative;
	margin-top: -1;
	margin-left:30;
	height: 2px;
	background: $background_blue;
	width: 560px;
        border-left: $border_blue 2px solid;
	font-family: $font_family;	
	font-size: 20%
        }
#box_left{
	position: relative;
	margin-top: $box_left_margin_top_relative;
	height:300px;
	width:140px;
	padding:0px;
	float:left;
	background: $background_blue;
	font-family: $font_family;
	font-size: 60%
	}
#box_center {
	postion: relative;
	margin-top: $box_center_margin_top;
	height:280px;
	width:570px;
	padding:20px;
	padding-left:5px;
	padding-right:35px;
	float:left;
	font-family: $font_family;	
	font-size: 60%
	}
#box_right {
	postion: relative;
	margin-top: $box_right_margin_top_relative;
	height: $box_right_height;
	overflow: hidden; 
	width:130px;
	padding:5px;
	float:left;
	background:$background_blue;
	text-align:left;
	font-family: $font_family;	
	font-size: 60%
	}
#box_address {
	postion: relative;
	float: left;
	margin-left: $box_address_margin_left;
	margin-top: $box_address_margin_top;
	font-family: $font_family;	
	font-size: 60%
	}	
#logo_position_right_top{
	float: right;
	position: relative;
	top: $logo_top_right_margin_top_relative;
	right: $logo_top_right_margin_side_relative;
	}
#logo_position_left_bottom{
	position: relative;
	float: left;
	top: $logo_bottom_left_margin_top_relative;
	left: $logo_bottom_left_margin_side_relative;
	}
#logo_position_right_bottom{
	float: right;
	position: relative;
	top: $logo_bottom_right_margin_top_relative;
	right: $logo_bottom_right_margin_side_relative;
	}
#tabmenu {
	position: relative:
	float: left;
	margin: $menu_top 0px 0px 0px;
	padding: 0px;
	padding-left: 0px;
	}
#tabmenu li {
	display			: inline;
	list-style-type	        : none;
        enabled			: true;
        text-decoration	        : none; 
         font			: $font;
	}	
#tabmenu a.active {
         border-top		: $border_blue 2px solid;
         border-right	        : $border_blue 2px solid;
         border-left            : $border_blue 2px solid;
         border-bottom	        : $background_blue 2px solid;
         background             : $background_blue;
         text-decoration	: none; 
         font		        : $font_menu;
	 color                  : $blue;
	}
#tabmenu a, a.inactive {
          border-top		: #E06000 2px solid;
          border-right	        : #E06000 2px solid;
          border-left		: #E06000 2px solid;
          background            : white;
          text-decoration	: none; 
          font		        : $font_menu;
	  color                 : #000000;
	  }
PHP;
?>

[Millennium]

Originally posted by registered_user:
add units of measure like so:

margin-left: 0 auto;
margin-right: 0 auto;

That only works if you use the margin: shorthand. It doesn't work if you set margin-left and margin-right separately. The original poster has it right as far as that goes.

This said, I prefer using "margin: 0px auto;" in cases like this.

[Millennium]

Aha; now it all becomes clear. You're not sending your CSS with the proper MIME type, and Safari is getting confused.

To fix this, add the following line of code to your PHP. It must go before any "echo" statements, but can otherwise go anywhere in the code:

Code:
header("Content-Type: text/css");

That will cause your code to be sent with the proper MIME type. You need a similar header for anything you do in PHP which does not output HTML.

[skalie]

Heh, I was asking you about that very issue three threads down from here.

Thanks.

[registered_user]

Originally posted by Millennium:
That only works if you use the margin: shorthand. It doesn't work if you set margin-left and margin-right separately. The original poster has it right as far as that goes.

This said, I prefer using "margin: 0px auto;" in cases like this.

In what instances does that not work?

[Millennium]

Originally posted by registered_user:
In what instances does that not work?

margin-left and margin-right only take one value, so browsers shouldn't be able to understand the "0px auto;" shorthand if you try putting it there. If you use the margin shorthand "margin: 0px auto;" then it works fine, because margin understands this.

[skalie]

For prosperity I tracked down the problem today. It was a syntax error in the css file along the lines of this ....

Code:
#frame {
	width: 			750px;
	margin-right:	        auto;   *//* bad comment syntax */
 	margin-left:	        auto; 
}

One of those things you can't spot on a friday, but sticks out like a sore thumb on a monday morning.

Edit: And I guess I should mention, I editted out all the comments before posting the css here on the forum. I tend to talk to myself far to much when coding, especially when trying something new. Guess I removed the culprit while doing so.