Box-Sizing Messed up in Chrome

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 649 Views - Last Post: 15 October 2011 - 12:50 PM

#1 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 09:53 AM

http://www.mechanica...r.com/news1.php

Ok so! I'm making a crappy site in notepad and I'm having a lot of trouble in Chrome. The layout works perfect in FireFox, but it is all shifted around in Chrome. I'm pretty sure this is due to the box-sizing tag. Theres no need for me to post a picture because its basically screwing everything up - but the mainly visible part is the nav bar.

I'm just going to post all of the CSS incase something else is interfering with it, sorry if its really long--- and im a bit rusty so its sloppy. The classes and ID's are pretty self explanatory.. ask me if you want anything else!! :-)

* {
margin: 0px;
}

#wrapper {
min-height: 100%;
width: 80%;
background-color: gray;
margin-left: 10%;
margin-right: 10%;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
border-width: 2px;
border-color: black;
border-style: solid;
}

#nav {
width: 100%;
height: 10%;
background-color: black;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;

}

.nav_button {
width: 20%;
height: 100%;
background-color: #333;
color: white;
float: left;
border-style: solid;
border-color: #98bf21;
border-width: 2px;
text-align: center;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

.body {
width: 80%;
height: 48%;
background-color: white;
border-style: groove;
margin-left: 10%;
margin-right: 10%;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#footer {
width: 100%;
height: 10%;
background-color: gray;
color: red;
border-top: 1px solid black;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}



#box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;

}

#news1_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news1_box:hover {
background-color: black;
}

#news2_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news2_box:hover {
background-color: black;
}

#news3_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news3_box:hover {
background-color: black;
}

#news4_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news4_box:hover {
background-color: black;
}

#news5_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news5_box:hover {
background-color: black;
}

#news6_box {
width: 33.33333333333333333%;
height: 50%;
background-color: red;
float: left;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

#news6_box:hover {
background-color: black;
}

.box:hover {
background-color: pink;
}

.box_title {
height: 20%;
width: 100%;
background-color: black;
color: white;
border-bottom-color: red;
border-bottom-style: groove;
border-bottom-width: 5px;
text-align: center;
font-weight: bold;
font-size: 20px;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

.box_text {
height: 70%;
width: 100%;
background-color: black;
color: white;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;

}
.slide {
width: 100%%;
height: 30%;
background-color: red;

}

#news_1_slide{
width: 100%;
height: 100%;
display: box;
background-color: red;
}

#news_2_slide{
width: 100%;
height: 100%;
display: none;
background-color: red;
}

#news_3_slide{
width: 100%;
height: 100%;
display: none;
background-color: red;
}

#news_4_slide{
width: 100%;
height: 100%;
display: none;
background-color: red;
}

#news_5_slide{
width: 100%;
height: 100%;
display: none;
background-color: red;
}

#news_6_slide{
width: 100%;
height: 100%;
display: none;
background-color: red;
}

.news_area {
min-height: 78%;
width: 80%;
background-color: white;
margin-left: 10%;
margin-right: 10%;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
border-color: black;
border-style: solid;
border-width: 1px;
}

.news_title {
height: 10%;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: brown;
color: white;
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
box-sizing: border-box;
}

.news_text {
min-height: 75%;
width: 100%;
background-color: tan;
opacity: .9;
border-bottom-width: 1px;'
border-bottom-color: black;
border-bottom-style: solid;
}

.comments {
min-height: 10%;
width: 100%;
background-color: yellow;
opacity: .5;
border-top-width: 1px;'
border-top-color: black;
border-top-style: solid;
margin-top: 5%;

}

.comment_bubble {
min-height: 10%;
width: 80%;
background-color: white;
border-color: black;
border-style: groove;
border-width: 2px;
margin-left: 10%;
margin-right: 10%;
margin-top: 1%;
}

#comment_submit {
width: 400px;
height: 200px;
background-color: gray;
border-color: brown;
border-style: solid;
border-width: 2px;

}



Is This A Good Question/Topic? 0
  • +

Replies To: Box-Sizing Messed up in Chrome

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:07 AM

I see that you're using divs for your individual navigation items.

We generally use list to do that kind of stuff. Here's an example of making an inline navigation with an unordered list.

<ul>
    <li>Videos</li>
    <li>Pictures</li>
    <li>Guides</li>
    <li>Contact</li>
</ul>


CSS:

li {
    display: inline; /* or inline-block if you need it */
    list-style-type: none;
}


Also, I would suggest that you have more confidence in your site and not go and call it crappy. It's much better than what I had when I started two years ago.

This post has been edited by EnvXOwner: 15 October 2011 - 10:12 AM

Was This Post Helpful? 0
  • +
  • -

#3 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:09 AM

View PostEnvXOwner, on 15 October 2011 - 10:07 AM, said:

I see that you're using divs for your individual navigation items.

We generally use list to do that kind of stuff. Here's an example of making an inline navigation with an unordered list.

<ul>
    <li>Videos</li>
    <li>Pictures</li>
    <li>Guides</li>
    <li>Contact</li>
</ul>


CSS:

li {
    display: inline; // or inline-block if you need it
    list-style-type: none;
}


Also, I would suggest that you have more confidence in your site and not go and call it crappy. It's much better than what I had when I started two years ago.


I've always tried not to use tables just because the name makes them seem.. old and out of style :P. What are the upsides to using tables over divs other than just being more organized? And can I make that work well in a fluid layout?
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:11 AM

I'm not using tables and I discourage the use of it with layout. I'm using lists. Tables are old, hard to style, take longer to load, and are harder to read. Only use tables for tabular data.

You use divs for divisions in your site. A navigation is usually a division, but the contents are usually a list of links.

This post has been edited by EnvXOwner: 15 October 2011 - 10:11 AM

Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:11 AM

Hey.

CSS does not use // comments. So when you type:
#wrapper {
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
}


The browsers will only use the first line, up until the first // and then discard the rest of the block as a parse error.

Use /* ... */ blocks for comments in CSS.
Was This Post Helpful? 1
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:12 AM

Ooops. You're right there Atli (I've been coding in PHP a lot lately). You wouldn't want to use // as Atli said.
Was This Post Helpful? 0
  • +
  • -

#7 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:15 AM

View PostAtli, on 15 October 2011 - 10:11 AM, said:

Hey.

CSS does not use // comments. So when you type:
#wrapper {
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
}


The browsers will only use the first line, up until the first // and then discard the rest of the block as a parse error.

Use /* ... */ blocks for comments in CSS.


Ok cool, that didn't fix it but good to know :-)

Thanks

View PostEnvXOwner, on 15 October 2011 - 10:12 AM, said:

Ooops. You're right there Atli (I've been coding in PHP a lot lately). You wouldn't want to use // as Atli said.


Ya, I use to use lists, but I had a lot of trouble getting them to work in a fluid layout ; so I switched to divs. Whats the upside of using lists over divs?
Was This Post Helpful? 0
  • +
  • -

#8 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:22 AM

Well, maybe this will help you.
Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:29 AM

View PostRavage, on 15 October 2011 - 05:15 PM, said:

Ok cool, that didn't fix it but good to know :-)

Your site looks closer to Firefox now that it did earlier though. Only the height seems an issue.

There are a couple of other syntax errors in there. Perhaps one of those is causing your problem?

Edit: Well, it did look closer to Fx when I typed this. You seem to have broken it again! :P

This post has been edited by Atli: 15 October 2011 - 10:32 AM

Was This Post Helpful? 0
  • +
  • -

#10 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 10:40 AM

View PostEnvXOwner, on 15 October 2011 - 10:22 AM, said:

Well, maybe this will help you.


Ok cool, I just added a list navbar on the same page. I think its working.. can't figure out why there is that margin on the sides.. wasn't there in Firefox.

Also, in the news area in chrome it is stretched past where the text ends, while in Firefox it is not. Any idea?
Was This Post Helpful? 0
  • +
  • -

#11 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 11:01 AM

View PostRavage, on 15 October 2011 - 05:40 PM, said:

can't figure out why there is that margin on the sides.. wasn't there in Firefox.

none is not a valid value for the margin style. Use margin: 0; if you want no margins at all.

View PostRavage, on 15 October 2011 - 05:40 PM, said:

Also, in the news area in chrome it is stretched past where the text ends, while in Firefox it is not. Any idea?

You have min-height: 75% on it, which Chrome respects but Firefox does not.


You really need to check out the link I posted. There are a bunch of errors in your CSS that you need to fix, all of which are listed there. (Just ignore all the warnings about the -moz and -webkit styles.)
Was This Post Helpful? 1
  • +
  • -

#12 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 11:02 AM

Lol I just looked at the site in IE8.. there is nothing that is working.. wtf Internet Explorer..
Was This Post Helpful? 0
  • +
  • -

#13 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 11:07 AM

View PostAtli, on 15 October 2011 - 11:01 AM, said:

View PostRavage, on 15 October 2011 - 05:40 PM, said:

can't figure out why there is that margin on the sides.. wasn't there in Firefox.

none is not a valid value for the margin style. Use margin: 0; if you want no margins at all.

View PostRavage, on 15 October 2011 - 05:40 PM, said:

Also, in the news area in chrome it is stretched past where the text ends, while in Firefox it is not. Any idea?

You have min-height: 75% on it, which Chrome respects but Firefox does not.


You really need to check out the link I posted. There are a bunch of errors in your CSS that you need to fix, all of which are listed there. (Just ignore all the warnings about the -moz and -webkit styles.)


Ok, I fixed everything on the validator that I could fix.. a few I couldn't find the answer to. And all of the warnings are fine.

I added margin: 0; but that did not fix it... I don't know why I have that margin at the LI...Its not inherited..
Was This Post Helpful? 0
  • +
  • -

#14 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 11:08 AM

I suggest you use a CSS reset that'll take care of the li margins and much more. My favorite is Eric Meyer's.
Was This Post Helpful? 1
  • +
  • -

#15 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Box-Sizing Messed up in Chrome

Posted 15 October 2011 - 11:16 AM

View PostEnvXOwner, on 15 October 2011 - 11:08 AM, said:

I suggest you use a CSS reset that'll take care of the li margins and much more. My favorite is Eric Meyer's.


Ok Wowwww.. that made everything look a lot better. Now I just got to find what exactly fixed that.

But internet explorer is till sooo fucked up. There better be quick and easy fix haahaha.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2