FORUMS: list search recent posts

Issue with CSS on firefox and chrome

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Maurice Valery Misse
Issue with CSS on firefox and chrome
on Jul 12, 2012 at 7:37:37 pm

Hey there,
I have a little trouble figuring out where I am missing something on my site.
I am developing a website for this company and I thought I was done.I first thought it may be But after trying publishing it.I found out that my menu disappeared and also when I was trying to zoom in/out my site looked shitty.Dreamweaver made me think It was ready.But it does not work on all other browsers but IE9.
I knew something was wrong with it when MSIE worked and Firefox and chrome not.
Here is the website:http://www.microboticsinc.com/Test/WIP/home.html.The funny thing is that the homepage looks so bad but the other pages are missing only the menu buttons.

Here is the buttons css code:

#products
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/products.jpg") no-repeat 0 0;

}

#products:hover
{
background-position: 0 -48.0px;
}

#products span
{

position: absolute;
top: -999em;
}


#home
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/home.jpg") no-repeat 0 0;

}

#home:hover
{
background-position: 0 -48.0px;
}

#home span
{

position: absolute;
top: -999em;
}


#support
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/support.jpg") no-repeat 0 0;

}

#support:hover
{
background-position: 0 -48.0px;
}

#support span
{

position: absolute;
top: -999em;
}


#contact
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/contact.jpg") no-repeat 0 0;

}

#contact:hover
{
background-position: 0 -48.0px;
}

#contact span
{

position: absolute;
top: -999em;
}


#about_us
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/about_us.jpg") no-repeat 0 0;

}

#about_us:hover
{
background-position: 0 -48.0px;
}

#about_us span
{

position: absolute;
top: -999em;
}

[/CODE][/QUOTE]

And the one for the background and all the rest:

[QUOTE][CODE]
.outerDiv {
border:solid 3px #transparent;
width:1070px;
height:1000px;
position:relative;
color:black;
font-family:verdana;
font-weight:bold;
font-size:11px;
text-align:left;
/**/
margin: 0 auto;
}

.nestedDivTL {
background-color: #transparent;
width: 175px;
position: absolute;
top: 165px;
left: 10px;
bottom: 596px;
}

.nestedDivTR {
background-color:#transparent;

position:absolute;
top:50px;
right:400px;
}

.nestedDivBL {
background-color:#transparent;
width:400px;
height:300px;
position:absolute;
top:200px;
right:25px;
}

.nestedDivBR {
background-color:#transparent;
width:400px;
position:absolute;
top:200px;
right:450px;
}

.nestedDivBG {
background-color:#transparent;
width:Auto;
height:Auto;
position:absolute;
top:0px;
left:0px;
}

.nestedDivSC {
background-color: #transparent;
position: absolute;
top: 176px;
left: 202px;
}

.nestedDivnf {
background-color:#transparent;
position:absolute;
top:420px;
left:15px;
width: 160px;
height:568px;
bottom: 12px;
/*overflow:hidden;*/

}

a:hover{text-decoration: underline; color:green}



* { margin: 0; padding: 0; }

/* .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
/* html .clearfix {height: 1%;}*/
/*.clearfix {display: block;}*/
/** End hide from IE-mac */

body
{background-image: url("Resources/Web Page Parts/Misc/Map.gif");
background-repeat:no-repeat center center-fixed;}



html {
background: url("Resources/Web Page Parts/Back Drops/carb.jpg") no-repeat center center fixed;
/*display: block; */ -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}



Can someone please help me figuring out what I missed or omitted?


Return to posts index


Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 12, 2012 at 7:44:38 pm

hello...

well - first things first. your home page css calls are to your local box as opposed to the copies on the server. on the other pages you have it correctly as:




but on the home page, it's:




that won't work online as we don't have access to your hard drive... :-)

as for the menu - i am on my mac right now and don't have access to ie, but for starters, you can remove the decimal pixel values - you can't place things at part of a pixel, so things like (for example) 48.2px can just be 48px...never seen anybody do that, so i'm not sure if that was generated for you or not? that also might be making browsers grumpy, so i'd start there.

sitruc


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 12, 2012 at 8:07:07 pm

Thank you so much,Curtis.

It worked really good. I just had to remove the root from the hard drive like you said.
http://microboticsinc.com/Test/home.html
BUYYYAAAAH!

So now when you zoom in/out the background look so bad and all the images in the background are messed up.Do you think it may be the decimal on the css file?

Thanks Again,you rock.


Return to posts index


Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 12, 2012 at 8:33:47 pm

hello...

i would start by getting rid of those - again i've never used those myself with css so i don't know if they would make certain browsers grumpy, but it's worth a shot to see - they aren't doing anything positive regardless...

i will try to get time over on my pc today to look at this in ie there to see what else might come to mind - but with css, there are always going to be some gotchas across browsers like this...

sitruc


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 12, 2012 at 8:47:15 pm

Thanks Curtis.
I really appreciate that.It helped a lot.


Return to posts index

Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 12, 2012 at 9:34:01 pm

hello...

can you expand on the zoom thing? do you mean when you make the font size bigger via the browser option? or when you change your screen resolution?

sitruc


Return to posts index


Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 13, 2012 at 2:20:49 am

Actually I meant changing the screen resolution on the browser with ctrl+mousescroll(up/down).


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 16, 2012 at 5:08:40 pm

Hey Curtis,
For some reasons I do not know yet.This website is only working fine on 3 machines on the whole company. I went on w3c.org to check my .CSS information and somehow the validator is giving me 14 errors and all of them are background related.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.microboti...

Do you have an idea what can be overseing?


Return to posts index

Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 16, 2012 at 5:18:29 pm

hello...

ahh i missed that one - it won't impact much, but ya - the "transparent" keyword for a bg color doesn't have the hash mark on it like a hex color would - so you would say either:

background-color: transparent;

or:

background-color: #dd0000;

however the default setting for background-color in a cell is transparent, so you don't need to specify that in most cases (i.e. you can remove that attribute). the only time i've personally used it is in a larger background declaration where i have a background image and i don't want to have a bg color if the loading of the image gets delayed - like this:

background: transparent url('/path/to/bg.gif') no-repeat left top;

otherwise you probably don't need to declare it...make sense?

sitruc


Return to posts index


Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 16, 2012 at 5:32:07 pm

it makes perfect sense.
I was doubting myself about the Hexadecimal colors because I really do not need them since I have images.
But I gotcha 100%.I will play with it a lil' to see if it helps for other machines in the building.I will also change the decimal pixels.I forgot to do so.

Thanks a lot


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 16, 2012 at 8:36:15 pm

Hey Curtis,
Now the website works only on certain browsers and not on others for example.It works on FF13+ and not on FF5,IE9 but not IE5,6,7,8.Chrome 18 but not the older versions.
I have changed and rechanged parameters on the mcb.css.I tried it on some other machines in the building and it works on certain machine and not on others.Here are my changes on mcb.css.
The website:http://www.microboticsinc.com/Test/home.html

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}


Thanks
Maurice


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 17, 2012 at 9:33:05 pm

Hey Curtis,
I have tried to fix the background floating issue and it kind of worked but not all the way because IE does not accept those changes.The map in the middle is cut in half.But i do not know why it is still messing up.
Also the blue background is all over the place.
Here is an update of what I basically changed.
http://www.microboticsinc.com/Test/home.html
I am out of ideas again.What did I forget?


Return to posts index


Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 17, 2012 at 11:35:36 pm

hello...

i will say that it's hard to put my finger exactly on what you don't like about the layout - the blue bg loads (although it's way too large for the web - it's 3mb (3000KB), and a good bg should be more in the 100KB range) - when you say it's all over the place, what do you mean?

the map bg is also very large file-size (325KB), so you will have visitors who say your site loads very slow...by cut off, do you mean that the map ends below the content on ie9?

it's very hard for me to isolate one specific thing for you that will fix this, i'm afraid - i could go through your css and try to guess, but your code looks to be software-generated - is that the case? if so, it is harder for a human to look at it and find obvious flaws.

in general, you have very specific measurements on a lot of thigs (i.e. make this div X x Y pixels) - in web land you want to avoid this if at all possible, so removing those might help you as well - you can use percentages or just let the browser dom take over...but this is more advanced layout stuff that is harder for me to answer in this medium. :-/

sorry to not be able to isolate the smoking gun here - but go through your code and remove as many of the hard-coded pixel dimensions for things wherever possible - that would be a first step...

sitruc


Return to posts index

Maurice Valery Misse
Re: Issue with CSS on firefox and chrome
on Jul 18, 2012 at 6:48:48 pm

Hey
Thank you for the feedback.
I fixed the blue background size.
I am trying to fix this website.I don't know if it was software--generated.But I got some information today saying that it was not developed to support IE only Firefox and Chrome.What I understand but still.. There are a lot of users who still depend on IE.
This how it looks now:
Now I am trying to create a specific css for IE.

Maurice


Return to posts index


Curtis Thompson
Re: Issue with CSS on firefox and chrome
on Jul 19, 2012 at 4:01:50 am

hello...

ya - this is one of those that just takes some experimenting with. you shouldn't have to create an ie-specific css file, but rather just go through item by item and futz with it until you get it working in all the major browsers.

css can be tricky that way, but in 99.5% of the cases, you can use single declarations for all browsers and not need to customize per...

and don't worry about sub versions of firefox or chrome - they release versions every month or so, and for the most part you should be ok across all those versions, as the releases are more micro in nature...

ie7/ie8/ie9 are a bit different, but not too bad. it just takes practice. again sorry to not have the magic answer to fix it...if you had me working on it, it'd be a bit of test and fix on my side too...

sitruc


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]