Choose from our various pricing plans. There is a package for everyone!


HTML Cross-browser compatibility issue

View previous topic View next topic Go down

Topic Solved HTML Cross-browser compatibility issue

Post by RSguideMaker on Tue Jun 26, 2012 6:19 pm

Hi there.
I have to code a whole HTML website for IT. Now, the school only uses Internet Explorer, meaning that when I code my things at school, I only know what it looks like on IE. I have reviewed my current webpages at home, and I have seen a problem.

Google Chrome:

Internet Explorer:


Why is it showing differently in the two browsers? Have I coded something wrong? Here is my body code:
Code:
<body>
<div class="wrapper">
            <center><h3><u>London Field Trip</u></h3></center>
            <br />
            <div class="menu" text-align="center">
              <div align="center"></div>
  <ul> <div align="center"><li>
    <div align="center"><a class="current" href="./index.html">Home</a></div>
  </li>
  <li>
    <div align="center"><a href="./pay.html">Pay for the trip</a></div>
  </li>
  <li><a href="./letter home.pdf">Letter</a></li> <li><a href="./bridgeexperience.html">The London Bridge Experience</a></li> <li><a href="./contact.html">Contact</a></li> </ul> <br style="clear:left"/> </div></div>


            <br />
            <p><strong>Please Note:</strong> All permission slips must be returned by 27 June. Any students returning permission slips returned after that date will not be included in the trip.</p>
            <br />
<strong>Price per child:</strong> £32.45 (includes transport and lunch)
<br />
<br />
<strong>Costs:</strong>
<br />
<table border="1">
  <tr>
    <th>Activity</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>The London Bridge Experience</td>
    <td>£11.50</td>
  </tr>
<tr>
    <td>Science Museum</td>
    <td>£0.00</td>
  </tr>
<tr>
    <td>McDonald's</td>
    <td>£5.00</td>
  </tr>
<tr>
    <td>Day Travelcard (Train Ticket)</td>
    <td>£9.90</td>
  </tr>
</table>
<br />

Plus £6.05 for the teacher's costs.
<br />
<br />


            <div class="push"></div>
       
        <div class="footer"><div align="center">
            Copyright © 2012. All Rights Reserved.</div></div>
       

</body>

I also have an external stylesheet if you think the error may be in there.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by Unknown Data on Tue Jun 26, 2012 9:16 pm

Is there a specific reason for adding so many div elements inside your li- and ul-elements?

Otherwise try use w3schools HTML/CSS validator: http://validator.w3.org/

avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by RSguideMaker on Wed Jun 27, 2012 9:10 am

There's no reason - Dreamweaver added them when I tried to center all the text.

EDIT: I used the W3C validator, and this came up:

However, I got told it was a CSS issue. Here's my CSS if you want to check it:

Code:
a:link {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
}
a:visited {
COLOR: #800080;
TEXT-DECORATION: none;
}
a:hover {
COLOR: #FF0000;
TEXT-DECORATION: none;
BACKGROUND: none;
}
a:active {
COLOR: #800080;
TEXT-DECORATION: none;
BACKGROUND: none;
}

body {
background: URL(images/background.png);
}
body {
color:#FFFFFF;
}
p {
background-color:lightgreen;
padding:10px;
color:black;
align:center;
border:1px dashed #000000;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
}
.menu{    width: 100%;    background-color: #333; }
.menu ul{    margin: 0; padding: 0;    float: left;}  .menu ul li{    display: inline;}  .menu ul li a{    float: left; text-decoration: none;    color: white;    padding: 10.5px 11px;    background-color: #333; }  .menu ul li a:visited{    color: white;}  .menu ul li a:hover, .menu ul li .current{   
color: #fff;   
background-color:#0b75b2;}

BIG EDIT: This is now solved. I solved it using the validator.


Last edited by RSguideMaker on Wed Jun 27, 2012 9:58 am; edited 1 time in total
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by Zilla on Wed Jun 27, 2012 9:22 am

I had a similar project last year for IT, and unfortunately I was required to use Dreamweaver.

I was just suggesting you use Notepad or Notepad++ as that will prevent the div tags to be added. Dreamweaver is a bit obnoxious.
avatar
Zilla
Premium Member


Age : 21
Posts : 166
Join date : 2012-05-03
Reputation : 13

View user profile

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by RSguideMaker on Wed Jun 27, 2012 10:02 am

Yeah I use Notepad++ at home (don't own a copy of Dreamweaver) and I only prefer Dreamweaver because it saves you a whole load of typing (d --> div --> cl --> class). I don't own any proper code editing programs. I use Notepad++ because it's free and actually, not that bad an editor.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by Zilla on Wed Jun 27, 2012 10:21 am

Yeah, but Dreamweaver adds unnecessary tags which CAN and HAVE ruined pages.
avatar
Zilla
Premium Member


Age : 21
Posts : 166
Join date : 2012-05-03
Reputation : 13

View user profile

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by RSguideMaker on Wed Jun 27, 2012 10:29 am

I guess. (You can lock this if you want)



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by Zilla on Wed Jun 27, 2012 11:08 am

Since this appears to be solved, the topic will be locked.
avatar
Zilla
Premium Member


Age : 21
Posts : 166
Join date : 2012-05-03
Reputation : 13

View user profile

Back to top Go down

Topic Solved Re: HTML Cross-browser compatibility issue

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum