WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > [SOLVED] CSS alignment browser issue

Reply
  Thread Tools Display Modes
Old 9th October 15, 03:03 PM   #1
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default CSS alignment browser issue

Hi

I have built a website and all is ok in Firefox when im at the office on a 1280 resolution monitor but I get home and on a 1280 resolution monitor, the buttons are not in line, I don't get it

can anyone help please, the site is www.it-doneright.co.uk

The code for the button is below

Code:
.push_button {
	position: relative;
	width:220px;
	height:40px;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	line-height:43px;
	font-family:'Oswald', Helvetica;
	display: block;
	margin: 30px;
}

.push_button:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}

.push_button:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:5px;
}

.push_button:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}

.blue {
	text-shadow:-1px -1px 0 #2C7982;
	background: #3EACBA;
	border:1px solid #379AA4;
	background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
	background-image:linear-gradient(top, #48C6D4, #3EACBA);
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
	background: #48C6D4;
	background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
ianhaney is offline   Reply With Quote
Old 10th October 15, 12:37 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS alignment browser issue

They look fine to me. What are they supposed to look like?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 10th October 15, 11:51 AM   #3
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: CSS alignment browser issue

Hi meesa

Thank you for the reply, appreciate it

Oh right that's good, they should be in a line vertically which they are but for some reason, on my chrome and firefox they are not

I have attached a image to show you what I mean

ianhaney is offline   Reply With Quote
Old 10th October 15, 03:06 PM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS alignment browser issue

IE 11, Chrome, and FF all look the same to me. Have you tried clearing your cache?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 10th October 15, 03:10 PM   #5
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: CSS alignment browser issue

Not yet, I have tried pressing ctrl and F5 but will clear the cache now and see if that works
ianhaney is offline   Reply With Quote
Old 10th October 15, 03:12 PM   #6
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: CSS alignment browser issue

Is still the same i'm afraid after clearing the cache in Chrome
ianhaney is offline   Reply With Quote
Old 11th October 15, 01:46 AM   #7
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS alignment browser issue

Which versions of FF and Chrome are you in?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 11th October 15, 07:57 AM   #8
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: CSS alignment browser issue

Chrome is Version 45.0.2454.101 m

Firefox is Version 41.0.1

It's weird cause when I get to the office and view the website in Firefox and Chrome, it is ok but is when I get home it's different
ianhaney is offline   Reply With Quote
Old 11th October 15, 01:39 PM   #9
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS alignment browser issue

Hmm, upon closer inspection, I see that my computer has Chrome off by a couple pixels. This is most likely due to how the text is rendered across the different computers.

Option 1: Set your textbox heights to ~55px, which SHOULD be large enough to hold the text, but could easily be broken.

Option 2:
Recode that section of the website so that each layer has the left/center/right thing going on, and wrap it all in a parent DIV. That way, if one column's section get bigger, the rest will auto-fill with whitespace.

Option 2 is the one I would suggest.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 11th October 15, 04:08 PM   #10
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: CSS alignment browser issue

Hi meesa

Thank you for the reply and advice, appreciate it

I did what you said and wrapped it in a parent div and is perfect now

Thank you so much for your help, replies and advice, really appreciate it

Kind regards

Ian
ianhaney is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:09 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.