Safari and chrome issue

I have a div that safari and chrome will give more margin-right than mozilla and internet explorer 8 does.

how can I target safari and chrome?

help.

Rather than trying to target those browsers with different css, I would find the problem first. Then find a solution that works for all browsers.

Post a link to your site or post a testcase of the problem code. We can probably find a x-browser solution.

that would be the way to go to find properties that best apply to all browsers thank you.

what is a test case?

the link is
http://nyhungry.com/menu2prueba.php?id=4&register=0

If you see the Restaurant Logo rectangular box at the right of the second UL will have a couple of extra margin-left pixels that won’t affect mozilla firefox and internet explorer 8.

The CSS and the html below but in the link above you can see it in more details.


#restaurantname {left:75.1em; top:135px; margin-left:2em; padding:0; position:absolute; height:72px; width:216px; background:#D83607;}


 #restaurantname img{
 margin-left:-3px;
 margin-top:1.2px;
 
 }

<p id="restaurantname"><a href="#"><img src="images/restaurantlogo2.gif" alt="menu" width="99%" height="68" /></a>  </p>


It’s kinda awkward to really know for sure because of hte awkward way you have things setup. Everything sorta just is placed via huge margins and sometimes absolute posiitoning.

I know you know how to code in columns etc (a good way). Why didn’t you code it for this layout? Any solution given (without a good bit of code change in it) would probably be just a temporary and not the best fix. I’d recommend you redo the CSS (and some of the HTML) to get it in columns/good code

aww!

since now and on I will get in the good habit of coding in columns didn’t know that was the way.

Thank!

Hi,
Not much has changed with the logic of your css since my last reply to you in a previous thread about that site.

You still need to learn some basic layout principles and stop mixing positioning methods.

These rulesets below have nothing and everything to do with your problem in this thread. The problem is that you don’t seem to know when to use what. You seem to want to set absolute positioning along with floats and inline-blocks etc.

It would be in your best interest to dedicate some quality time into learning how things really work. :slight_smile:


#right {
right:2.8em;
[COLOR=Red]display:inline;[/COLOR]
width:80px;
[COLOR=Red]position:absolute;[/COLOR]
display:-moz-inline-box;/* Firefox 2 */
[COLOR=Red]display:inline-block;[/COLOR]/* FF3, Opera, Safari */
margin-top:8.5em;
margin-bottom:0;
font-family:"Times New Roman", Times, serif;
font-weight:500;
font-size:11px;
[COLOR=Red]float:left;[/COLOR]
}

#move .second {
width:100x;
height:150px;
padding:0;
margin-bottom:0em;
margin-top:6em;
[COLOR=Red]display:inline-block;[/COLOR]
margin-right:1em;
margin-left:1em;
[COLOR=Red]float:left;[/COLOR]

}
#register{
margin-top:9.8em;
margin-left:29em;
[COLOR=Red]display:inline;
position:absolute;[/COLOR]
font-size:11.4px;

}
#registernow{
margin-top:9.8em;
margin-left:56em;
[COLOR=Red]display:inline;
position:absolute;[/COLOR]
font-size:11.4px;

}

my God!

i will have to recode everything.

Yes unfortunately the HTML needs a lot of work and as Ray pointed out, so does the CSS :(.

that will just drive me crazy right now.

The thing is though, until you learn what all these properties and values are actually doing, you will never be able to code successfully. You have to know when and when not to use certain properties, you can’t just throw them all at the selector and hope one does what your trying to do. You will waste a lot more time in the future too until you get a firm grasp on css. :wink: