Page 1 of 1

IE and Firefox

Posted: Tue Jul 26, 2011 8:08 am
by RossDolan
I have just uploaded my website online and it is working perfectly fine on Firefox but on Internet Explorer (im using IE8) the images are out of sync, the flash movies don't play and the javascript drop down menu I used is completely out of sync as well. I'm sure I heard someone talking about this before but I can't remember what they said to resolve the issue.

Any help would be appreciated.

p.s I had to take the site back down because the guy I'm doing the site for said he didn't want it up looking like that on IE.

Cheers
Ross

Re: IE and Firefox

Posted: Tue Jul 26, 2011 9:11 am
by RossDolan
P.s I am having the same problem on Google chrome :(

Re: IE and Firefox

Posted: Tue Jul 26, 2011 10:12 am
by Jonah Bron
Can't really know what the problem is without seeing some code.

Re: IE and Firefox

Posted: Tue Jul 26, 2011 10:59 am
by RossDolan
I will speak to the guy tomorrow and get the site back up so you can have a look at it and see. In the meantime here is the stylesheet. Cheers.

Code: Select all

/* CSS Document */

* {padding:0px;}
#LOGO {margin-top:-10px;margin-left:164px;width:1000px;font-size:80px;color:#FFF;font-family:BachenasATT;height:120px;}
#TN3 {float:right; margin-right:190px;}
#AWARD {width:198px; height:250px; float:left; font-size:11px; font-family:arial; border:1px outset #363636 }
#COLLINTON {position:relative;left:0px;top:-3px;width:300px;color: #FFF;font-family:BachenasATT;}
#HOMES {margin-left:100px;width:203px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#EARTHENERGY {width:203px;float:left;top:400px;text-align:center;font-family:BachenasATT;color: #FFF;font-size:12px;}
#KITCHENS {width:203px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#CENGINEERING {width:203px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#GOFFICES {width:203px;float:left;top:400px;text-align:center;color: #00275E;font-family:BachenasATT;font-size:12px;}
#WWDO {width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#PROJECTS {width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#TEAM {width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#CONTACT {width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;border:none;}
#FLASH {width:1000px;top:400px;height:285px;text-align:center;font-family:BachenasATT;font-size:12px;color:#FFF;float:left;margin-left:164px; margin-top:0px;}
#INFO {width:1000px;float:left; margin-left:164px;top:auto;text-align:center;height:250px;font-family:Arial;font-size:14px;color:#FFF; font-weight:normal;}
#INFO1 {width:1000px;float:left; margin-left:164px;top:auto;text-align:left;height:600px;font-family:Arial;font-size:14px;color:#FFF;}
#INFOX {width:500px; float:right; top:auto; height:550px;}
#INFO2 {width:780px; float:left; margin-left:20px; top:auto; text-align:center; height:250px; font-family:Arial; font-size:14px; color:#FFF;}
#INFO3 {width:1000px;float:left;margin-left:164px;top:auto;text-align:left;height:400px;font-family:Arial;font-size:14px;color:#FFF;}
#INFO4 {width:1000px;float:left;margin-left:164px;top:auto;text-align:center;height:400px;font-family:Arial;font-size:14px;color:#FFF;}
#KITCHINFO {width:500px; float:left; height:200px;}
#KITCHINFOPIC {width:55px; float:left; height:120px;}
#KITCHINFOPIC1 {width:131px; float:left; height:150px;}
#ticker {margin-left:164px;width:1000px;float:left;top:auto;text-align:center;height:30px;font-family:BachenasATT;font-size:20px; font-weight:bold;color:#000; background-color:#FFF;}
#ticker .divider {padding: 0 4px;}
#ticker a, #NEWS a:visited{color: #0A0A4A;text-decoration: none;}
#ticker a:hover{color: #930;}
#ACCOLADES {width:1005px;float: left;top:auto;text-align:center;height:100px;font-family:BachenasATT;font-size:12px;color:#FFF;margin-left:164px;}
#ACCOLADES1 {width:1005px;float:left; top:auto; text-align:center; height:100px; font-family:BachenasATT;font-size:12px;color:#FFF; margin-left:164px;}
#PROJECTS1 {width:200px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px; height:37px;}
#PROJECTS2 {width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#TEAM1 {width:200px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px; height:37px;}
#TEAM2 {width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#CONTACT1 {width:200px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px; height:37px; border:none;}
#CONTACT2 {width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px; border:none;}
#SHOP {width:200px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#SHOP1 {width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#SHOP2 {width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#WWDO1 {width:200px;float:left;margin-left:10px;top:400px;text-align:center;color:#FFF;font-family:BachenasATT;font-size:12px; height:37px;}
#WWDO2 {width:170px;float:left;margin-left:10px;top:400px;text-align:center;color:#FFF;font-family:BachenasATT;font-size:12px; height:40px;}
#STYLES{width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT; height:37px;}
#STYLES1{width:250px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#STYLES2{width:166.67px;float:left;top:400px;text-align:center;color: #FFF;font-family:BachenasATT;font-size:12px;}
#HOME{width:200px;float:left;margin-left:153px;top:400px;height:37px;}
#HOMEH{width:200px; float:left; margin-left:153px; top:400px; text-align:center; color:#936B2D; font-family:BachenasATT; font-size:15px; height:37px;}
#HOME1{width:167px;float:left;margin-left:153px;top:400px;background:#363636;}
#DIFF{width:200px;height:245px;float:left;margin-left:164px;text-align:center;}
#DIFF1{width:200px;height:245px;float:left;text-align:center;}
#DIFFC{width:200px;height:245px;float:left;text-align:center}
#DIFFH{width:200px;height:37px;float:left;text-align:center; margin-left:164px;}
#DIFFH1{width:200px;height:37px;float:left;text-align:center;}
#DIFFHC{width:200px;height:37px;float:left;text-align:center;}
#ATT1 {width:212px; height:75px; float:right; margin-right:100px; background:url(Attributes.jpg); background-repeat:no-repeat;}
#ADDRESS {width:600px; height:75px; margin-left:100px; font-size:14px; font:BachenasATT;}
#HOMEWWD {width:400px; height:427px; float:right; top:0;}
.myButtonLink {display:block; width:200px; height:37px; background:url(Headers/DiffHeadHome.jpg); text-indent:-9999px;}
.myButtonLink:hover {background:url(Headers/DiffHeadHomeB.jpg);}
.myButtonLinkEE {display:block; width:200px; height:37px; background:url(Headers/DiffHeadEE.jpg); text-indent:-9999px;}
.myButtonLinkEE:hover {background:url(Headers/DiffHeadEEB.jpg);}
.myButtonLinkKitch {display:block; width:200px; height:37px; background:url(Headers/DiffHeadKitch.jpg); text-indent:-9999px;}
.myButtonLinkKitch:hover {background:url(Headers/DiffHeadKitchB.jpg);}
.myButtonLinkCE {display:block; width:200px; height:37px; background:url(Headers/DiffHeadCE.jpg); text-indent:-9999px;}
.myButtonLinkCE:hover {background:url(Headers/DiffHeadCEB.jpg);}
.myButtonLinkGO {display:block; width:200px; height:37px; background:url(Headers/DiffHeadGO.jpg); text-indent:-9999px;}
.myButtonLinkGO:hover {background:url(Headers/DiffHeadGOB1.jpg);}
.piclinkhomes {display:block;width:200px; height:245px; background:url(IndexImages/HomesG.jpg); text-indent:-9999px;}
.piclinkhomes:hover {background:url(IndexImages/HomesNew.jpg);}
.piclinkee {display:block;width:200px; height:245px; background:url(IndexImages/EE2.jpg); text-indent:-9999px;}
.piclinkee:hover {background:url(IndexImages/EE1.jpg);}
.piclinkkitch {display:block;width:200px;height:245px; background:url(IndexImages/KitchenG.jpg); text-indent:-9999px;}
.piclinkkitch:hover {background:url(IndexImages/Kitchen.jpg);}
.piclinkCE {display:block;width:200px;height:245px; background:url(IndexImages/CENewG.jpg); text-indent:-9999px;}
.piclinkCE:hover {background:url(IndexImages/CENew.jpg);}
.piclinkGO {display:block;width:200px;height:245px; background:url(IndexImages/GONewG.jpg); text-indent:-9999px;}
.piclinkGO:hover {background:url(IndexImages/GONew.jpg);}
.myWWD {display:block; width:200px; height:37px; background:url(Headers/DiffHeadWWD.jpg); text-indent:-9999px;}
.myCP {display:block; width:200px; height:37px; background:url(Headers/DiffHeadCP.jpg); text-indent:-9999px;}
.myTeam {display:block; width:200px; height:37px; background:url(Headers/DiffHeadOT.jpg); text-indent:-9999px;}
.myContact {display:block; width:200px; height:37px; background:url(Headers/DiffHeadCU.jpg); text-indent:-9999px;}
a { color:#FFF; text-decoration:none; }
#01 {background-color:#363636; color:#FFF;}
#jsddm{margin: 0;padding: 0}	
#jsddm li{float: left;list-style:none;margin-left:10px;}
#jsddm li a{display: block;background: #363636;padding: 5px 12px;text-decoration: none;width: 70px;color: #EAFFED; border:1px solid white}
#jsddm li a:hover{background: #363636}
#jsddm li ul{margin: 0;padding: 0;position: absolute;visibility: hidden;border:1px solid white;}
#jsddm li ul li{float:none;margin-left:-100px;display: inline;}	
#jsddm li ul li a{width: auto;background: #363636;}
#jsddm li ul li a:hover{border: 1px solid white}
table {text-align:center; font-weight:bold;}
#PICLINK {width:220px; height:155px; float:left; top:auto; border: 1px solid #FFF; text-align:center;}
#PICLINK1 {width:220px; height:155px; float:left; margin-left:0px; border: 1px solid #FFF; text-align:center;}
#PICLINK2 {width:220px; height:155px; float:left; margin-left:10px; text-align:center;}

Re: IE and Firefox

Posted: Tue Jul 26, 2011 11:58 am
by malcolmboston
That does not really help, viewing your site online would be more useful.

also i would recommend, from personal experience with cross browser issues, you should change your css decleration to

[syntax]* { padding:0px; margin: 0px; }[/syntax]

Re: IE and Firefox

Posted: Tue Jul 26, 2011 1:09 pm
by RossDolan
I wasn't sure if the above would help, I will get the website up tomorrow and let you all know its there.

I seen the above css decleration on a website but I wasn't sure if that would zero out the margins I had set in each of the variables (i.e. #LOGO, #WWDO1), would doing that have any effect?

Cheers
Ross

Re: IE and Firefox

Posted: Tue Jul 26, 2011 5:39 pm
by Benjamin
:arrow: Moved to HTML, CSS and other UI Design Technologies

Re: IE and Firefox

Posted: Wed Jul 27, 2011 2:31 am
by RossDolan
I have put the website back online just now, the address is www.collinton.com

Cheers in advance for any help

Re: IE and Firefox

Posted: Wed Jul 27, 2011 3:35 am
by RossDolan
I have been told to take it down again, so if anyone is wanting to have a look at it, i'll put it back up, cheers

Re: IE and Firefox

Posted: Wed Jul 27, 2011 6:22 am
by RossDolan
I think I have got them it working on the different browsers now. Cheers

Re: IE and Firefox

Posted: Wed Jul 27, 2011 7:49 am
by RossDolan
I was wrong, for some reason I'm having the following issues on one computer:

I have a <div> that I use to hold my Flash movie on each of the main pages, they were all working fine now suddenly three of the divs have shifted to the right and two remained the same. I never changed any code and I'm confused because they are all set inside the same div so they should all be positioned the same.

Help please! :(

P.s I've put the website back up