IE and Firefox

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

IE and Firefox

Post 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
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post by RossDolan »

P.s I am having the same problem on Google chrome :(
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: IE and Firefox

Post by Jonah Bron »

Can't really know what the problem is without seeing some code.
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post 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;}
Last edited by Benjamin on Tue Jul 26, 2011 1:02 pm, edited 1 time in total.
Reason: Added [syntax=php|sql|css|javascript] and/or [text] tags.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Re: IE and Firefox

Post 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]
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post 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
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: IE and Firefox

Post by Benjamin »

:arrow: Moved to HTML, CSS and other UI Design Technologies
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post by RossDolan »

I have put the website back online just now, the address is www.collinton.com

Cheers in advance for any help
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post 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
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post by RossDolan »

I think I have got them it working on the different browsers now. Cheers
RossDolan
Forum Commoner
Posts: 31
Joined: Tue Jul 19, 2011 5:44 am

Re: IE and Firefox

Post 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
Post Reply