CODEWITHSUNDEEP
cssgoogle-chromefirefoxalignmentpadding
Rifshan
Rifshan

Reputation: 153

FireFox & Chrome CSS Differs

The problem is, the CSS of site is different on FireFox and Chrome..

Fire fox loads it the way i want, but in chrome its messed up ...

I tried adding this to CSS as well,

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

Im using Visual Studio 2010 so the site is on my localhost...

I tried clearing all cookies/cache...

Tried with a different Chrome based browser.. (SW Iron)... seems to be the same...

This is where the problem is coming..

.categories ul {
    margin: 0; padding: 0;
    float: left;
    width:100%;
}

.categories ul li {
    display: inline;
    float:left;
    padding-top:10px;
}


.categories ul li:nth-child(1) a{
  padding: 0 66.5px 10px 66.5px;
  margin-left:16.375px;
}

.categories ul li:nth-child(4) a{
  padding: 0 69px 10px 69px;
}

.categories ul li:nth-child(6) a:after{
  display:none;
}

.categories ul li:nth-child(7) a{
  margin-left:15.375px;
}

.categories ul li:nth-child(8) a{
  padding: 0 51px 10px 51px;
}

.categories ul li:nth-child(10) a{
  padding: 0 73px 10px 73px;
}

.categories ul li:nth-child(11) a:after{
  display:none;
}

.categories ul li:nth-child(12) a{
  margin-left:16.375px;
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(13) a{
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(14) a{
  border-bottom:none;
}

.categories ul li:nth-child(15) a{
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(16) a{
  border-bottom:none;
}

.categories ul li:nth-child(17) a:after{
  display:none;
}

.categories ul li:nth-child(17) a{
  border-bottom:none;
}


.categories ul li a {
   position : relative;
    float: left; 
    text-decoration: none;
    color: white; 
    padding-bottom:10px;
    padding-left:40px;
    padding-right: 40px;
    border-bottom: 2px solid #e5e5e5;
}
.categories ul li a:after {
  position: absolute;
  right: 0;
  content: '';
  height: 100%;
  width: 1px;
  background: linear-gradient(to top, black, transparent);
}
 
 .categories ul li a:hover, .categories ul li .current 
 {
     
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(255,255,255,0.12) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(255,255,255,0.12))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1fffffff',GradientType=0 ); /* IE6-9 */


}
 
.categories ul li a:visited {
    color: white;
}

FireFox

Chrome

Firefox image at top.... Chrome at bottom...

Upvotes: 0

Views: 116

Answers (2)

demonofthemist
demonofthemist

Reputation: 4199

According to me, It is font rendering issue. The width of font is differant in Chrome & Firefox. Thus pixel required for same word are differant in Firefox & Chrome.

Along with that the technique you are using is fully wrong. Use are specifying width for each li by adjusting padding. Instead give then equal width for each row. Thus there will be spare space to accomodate change in with of letters.

Updated generalized code should look as follows:

/** General List Styles **/
ul{
    display: block;
    margin:0; padding:0;
    list-style:none;
}

li{
    float:left;
    display:block;
    width:16.66%;
    position:relative;
}

li a{
    display: block;
    font-size: 14px;
}

/** Middle Row Cell (Using 'middle' class on them) **/
li.middle{
    width:20%;
}

/** No Sep Cell (Using 'nosep:after' class on them) **/
li.nosep:after{
    display:none;
}

Upvotes: 1

Waxi
Waxi

Reputation: 1651

I'll just give you the bare bones of what you're looking for:

ul {
    display: block;}

li {
    display: inline-block;
    width: auto;
    height: auto;}

li a {
    display: block;
    padding: 5px 50px;
    font-size: 14px;}

li:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 10px;
    background: black;}

li:last-child:after {
    display: none;}

If you're just looking for them to stack naturally then you can just adjust the padding in the li a to modify the spacing, but if you're always looking for a certain amount per row, then add some percent widths to the li and if you wanted uneven numbers then that's when you target individual ones.

Upvotes: 1

Related Questions