Member Avatar for aVar++

I have the way I want my site to look in chrome and I wanted to make it also look the same in mozilla therefore I replaced the webkit's with moz in the CSS. However the #mySection div is alot smaller in width in moz than chrome. There are screenshots of the differences below. 4c555d256e7cae4cf523e71aafa16c7947e95b4cdd1a556ae58d4e9b699e048d

Here is my CSS:

/* Resets everything so that there are no errors */
*{
    margin:0px;
    padding:0px;
}

/* Sets style fort headers and paragraphs */

h1{
    font: bold 30px Andale Mono;
}
h2{
    font: bold 25px Andale Mono;
}

p{
    font: normal 15px Andale Mono;
}

article p {
    margin-right:100px
}

article footer p {
    text-align: right;
    margin:0px;
}

header, nav, section, hgroup, aside, footer {
    display:block;
}

/* Makes the body flex */
body {
    width: 100%;
    display:-moz-box;
    -moz-box-pack: center;
}

/* resizes the "new" image */
article img {
    width:100px;
    height:100px;

}

/* Makes the body flex(resize) */
#big_wrapper {
    max-width: 1000px;
    margin:20px 0px;
    -moz-box-orient: vertical;
    -moz-box-flex: 1;
}


/* Style for header */
#myHeader {
    padding:20px;
    border: 2px solid grey;
    text-align: center;
    color:white;
    background: black;
    font:bold 30px Tahoma;
}

/* Style for navigation bar */
#myNav {
    background: white;
    border-bottom:2px solid blue;
    color:blue;
}

#myNav li{
    display: inline-block;
    list-style: none;
    padding: 10px;
    font: bold 15px Tahoma;
}

/* Style for main content */
#mySection {
    -moz-box-flex:
    margin:20px;
    padding:20px;
}

/* Makes the content re-size */
#otherDiv {
    display:-moz-box;
    -moz-box-orient: horizontal;
}



hr {
    margin-left: 15%;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* Style for article */
article{
    padding: 20px;
    margin-bottom: 15px;
}

#myAside {
    padding: 20px;
    margin:20px 0px;
    background:white;
}

aside header{
    color:blue;
}

article footer {
    text-align: right;
    color:black;
}

#myFooter {
    margin-top:10px;
    border-top: 2px solid blue;
    color: #000000;
    text-align: center;
    padding: 20px;
}

.divImg {
    float:right;
}

#border1, #border3 {
    border: 1px solid black;
}

#border2 {
    border:10px solid #f7f7f7;
}
Edited by aVar++
  • 2 Contributors
  • 5 Replies
  • 190 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by cmps

Dani AI

Generated

— the most likely cause is a CSS parsing / old-layout mismatch rather than a Firefox bug. In your pasted rules the #mySection block contains -moz-box-flex: with no value (and no terminating semicolon). That produces a broken declaration which can make Firefox ignore that rule (and sometimes subsequent declarations). Also using the legacy -moz-box / -webkit-box model exposes small implementation differences between engines. A cleaner, more robust approach is to use the modern flexbox syntax (with fallbacks) and explicitly allow flex items to shrink in Firefox.

Try this minimal replacement (keeps the wrapper centered and lets the section size consistently across browsers):

body {
  display: -webkit-box;   /* legacy fallback */
  display: -ms-flexbox;   /* IE10 fallback */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

#big_wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  box-sizing: border-box;
  flex-direction: column;
}

#mySection {
  flex: 1 1 auto;   /* allow grow/shrink */
  min-width: 0;     /* critical: lets Firefox shrink the flex item */
  margin: 20px;
  padding: 20px;
}

Practical checklist:

  • Fix the syntax error first (remove or give -moz-box-flex a value, or better, replace it with flex as above).
  • Add min-width: 0 to any flex child that should shrink (common cross-browser fix).
  • Use box-sizing: border-box so padding doesn’t expand computed width unexpectedly.
  • Look for fixed-width children or long unbreakable content (images, long words); set img { max-width:100%; height:auto; } or allow wrapping.
  • Debug with the browser dev tools: inspect computed widths and which CSS rules are applied/ignored.

is right that there are simpler responsive methods, but for the layout you describe, standard flexbox (plus the min-width:0 fix) will give consistent behavior across modern Chrome and Firefox.

Recommended Answers

All 5 Replies

Member Avatar for cmps

why don't you keep both -moz- and -webkit- at the same time ?
and why are you using them .. you can do this with simple css no need for moz and webkit, personally i use them only to round corners

Member Avatar for aVar++

I have done this so it is when the browsers/window of the browsers are resized the website changes shape, Can you do that with simple css?

Also to round corners, you dont need it, just use this:-

border-radius: 15px;
Member Avatar for cmps

Aha I haven't tried that before but thank you.
Yes you can do this with css by using the percentages. Here's a fast example:

<div style="width:30%; float:left; background-color:red;">This i 30%</div>
<div style="width:70%; float:left; background-color:blue;">This i 70%</div>

Member Avatar for aVar++

I completely forgot about percentages, I will experiment with that today. Thank you:)

Member Avatar for cmps

okay, you're welcome :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.