Chrome / Firefox difference

Negative margin Value not providing expected result in chrome

[tonylees]

Hi,
I have a problem with a section on each page on my domain

This site was created in Bootstrap 3 and then converted in to a wordpress theme.

The container the text is within has an ID of top-banner and the CSS for this is

#top-banner {
 width: 966px;
 height: 132px;
 margin: 0px auto;
 margin-top: 0px;
 margin-bottom: 0px;
 background-image: url(../images/bg-page-title.png);
 background-repeat: no-repeat;
 background-position: center;
 z-index: 20;
 margin-top: -100px;
 margin-bottom: 30px;
}

The text is in a div with an ID of title
the CSS for this is

#title {
 width: 100%;
 margin-top: -10px;
 padding-top: 0px;
 float: left;
 text-align: center;
}

I have tried the hacks for chrome specific css but this doesn't work

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
 #title {
 width: 100%;
 margin-top: 20px;
 padding-top: 0px;
 float: left;
 text-align:center;
}
}

Your help would be grately appreciated.

Thanks
Tony

[edited by: not2easy at 10:19 pm (utc) on Feb 23, 2019]
[edit reason] removed links [/edit]

[not2easy]

I would guess that the problem is related to the text in the "#top-banner" div appearing outside of the #top-banner <div> and the "#title" text overflowing its <div>? I have been known to guess wrong though, your description of the difficulty would definitely help. I do not understand what the media query is supposed to do. I hope that you have a viewport set to handle the resizing.

Generally you would try to avoid the floats, but that would depend on what the rest of the css holds.

[lucy24]

margin: 0px auto;
margin-top: 0px;
margin-bottom: 0px;
<snip>
margin-top: -100px;
margin-bottom: 30px;

Say what now?

When I'm experimenting, one simple test is to apply a visible border to each element--a different one for each--making it easier to see exactly where each one is located. Doesn’t always work, because sometimes the mere act of setting a border causes the element to position itself differently, but it’s an easy start.

[tangor]

@tonylees ... welcome to Webmasterworld!

Would be helpful if you describe the difference between chrome and ff displays.

[tonylees]

HI,

The @media query is the hack I found to target Chrome only, but firefox used that CSS as well.

Thanks
Tony

[edited by: not2easy at 11:47 am (utc) on Feb 24, 2019]
[edit reason] Please see Charter [/edit]

[tangor]

Include your html code for this section. Change any reference to your site to example.com. Make any phone numbers xxx xxx xxxx xxx etc obfuscate any addresses ...

[tonylees]

Ok, Sorry, missed the rules :(

html for the section with the issue;

<div id="top-banner">
<div id="left-title">
  </div>
  <div id="title">
  <h7>Call FREE today on 1234 567 890</h7>
 </div>
</div>

CSS

#top-banner{
width: 966px;
height: 132px;
margin: 0px auto;
background-image: url('/wp-content/themes/example/assets/images/bg-page-title.png');
background-repeat: no-repeat;
background-position: center;
z-index:20;
margin-top:-100px;
margin-bottom:30px;
}

#title {
 width: 100%;
 margin-top: -10px !important;
 padding-top: 0px;
 float: left;
 text-align:center;
}

#title h7{
color: #588ae3;
font-size: 22px;
font-weight: bold;
}

The text should be positioned central within a background image, and on Firefox it is

#title margin-top:-10px;

but on chrome the text is out of position to the top of the image... I need to change the -10px to 20px to get the text to align correctly in chrome.

[edited by: not2easy at 12:01 pm (utc) on Feb 24, 2019]
[edit reason] readability [/edit]

[tangor]

Just first look...

Is there a reason for h7 for title? Has h7 been styled in css? Browsers handle hx with various defaults and not all of them are the same.

[tangor]

What I mean styled for h7 is baseline, etc ... these can change unless explicitly declared.

[tonylees]

h7 is styled in css, but not really required as I can style the font within title.
I have removed the h7 style and placed within title with no change to positioning

[lucy24]

margin: 0px auto;
margin-top:-100px;
margin-bottom:30px;

Whyyyyy?

Using nonexistent elements like h7 is tricky, because not all browsers will recognize them. (Most will, and it's fantastically useful in preparation because I can say <sc> or <f> and decide later on what I'm really going to call it. But there's always MSIE....)

margin-top: -10px !important;

The moment you find yourself needing to use the label !important you need to step back and figure out why this label seems to be necessary. Almost invariably you will find some other rule that wants the (in this case) margin-top to have some other value, and then you can override the rule more precisely. As in:
  div.thisname p {color: red;}
  p.othername {color: blue;}
and then if you want p.othername to be blue all the time, even when it happens to be inside div.thisname, you spell out
  div.thisname p.othername {color: blue;}
or even
  div[class] p.othername {color: blue;}
This is more reliable than !important because now you're telling the browser exactly what you want in all circumstances, rather than “Do this because I’m shouting loudly”.

[tonylees]

Hi lucy
I was using !important to try and force Chrome in to using the setting it is not necessary to position the text in firefox

[not2easy]

Chrome has some spacing and display differences. Sometimes setting the display: property can persuade it to behave. You can try adding

display: inline-block; 

to the container "top-banner" but it doesn't always help when nested divs have variations in width settings. I see that the "top-banner" div is set to "width: 966px;" and contains two other divs. One of those has both "width: 100%;" and "float: left;" but there isn't any css included for the "left-title" div that precedes it so we can't see what effect that has.

Have you taken your URL to W3C [jigsaw.w3.org] for a preliminary checkup?

[lucy24]

One of those has both "width: 100%;" and "float: left;"

Hm, missed that. Seems like the only conceivable difference between this pair of styles and saying nothing--meaning you'd default to {display: block} assuming it's a div--is that you're offering new opportunities for selected browsers to try to get smart.

I do have one div class I use periodically whose css includes {width: 100%;} but really it’s done more as a reminder to myself that this particular div takes up the full available horizontal space, even though it's used in an environment where most elements have a specified width. It would--or should--make no difference if I left out the width specification.