WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Solved HTML Cross-browser compatibility issue Wed Jun 27, 2012 12:19 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
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: HTML Cross-browser compatibility issue Navbarchrome

Internet Explorer: HTML Cross-browser compatibility issue Navbarie


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.

2Solved Re: HTML Cross-browser compatibility issue Wed Jun 27, 2012 12:09 pm

ankillien

ankillien
Administrator
Administrator
There are many errors in the HTML coding, but for the problem you stated above is with CSS I think. Can you please post the CSS codes?

RSguideMaker

RSguideMaker
Registered Member
Registered Member
I used the W3C validator, and this came up:
HTML Cross-browser compatibility issue Errorsinhtml

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.

ankillien

ankillien
Administrator
Administrator
Solved | Locked

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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