473,327 Members | 2,103 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Cross browser compatibility

134 100+
Hello all,

I am currently creating a simple html page for someone. But when testing the webpage somehow google chrome is acting very strange with it.

This is the code I am using

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head><title>AV office Assistant</title>
  4.     <LINK href="style.css" rel="stylesheet" type="text/css" />
  5. </head>
  6.     <body>
  7.         <div id="background">
  8.             <img src="" />
  9.             <div class="company">
  10.                 AV Office Assistant | Flexibele kantoorondersteuning | Met plezier aan het werk!
  11.                 <div class="text info">
  12.                     Bent u op zoek naar tijdelijke ondersteuning voor kantoor of service organisatie, AV Office Assistant helpt u graag!<br />
  13.                     Met uitgebreide ervaring in serviceverlening en verkoopondersteuning neem ik snel en makkelijk uw werkzaamheden over.<br />
  14.                     <br />
  15.                     <div class="text advantages">
  16.                         Wat kan ik voor u doen:
  17.                         <ul>
  18.                             <li>receptie-  en telefoondiensten</li>
  19.                             <li>commerciële ondersteuning</li>
  20.                             <li>contacten leggen en onderhouden</li>
  21.                             <li>agendabeheer en planning</li>
  22.                             <li>hostess service</li>
  23.                             <li>voorbereiden en organiseren van bijeenkomsten</li>
  24.                         </ul>
  25.                         <br />
  26.                         Voordeel voor u:
  27.                         <ul>
  28.                             <li>geen contractverplichting en geen bemiddelingskosten</li>
  29.                             <li>alleen gewerkte uren worden in rekening gebracht</li>
  30.                             <li>ook beschikbaar voor korte periode,  zelfs een paar uur of een paar dagen</li>
  31.                         </ul>
  32.                         <br/>
  33.                     </div>
  34.                     <div class="text moreInfo">
  35.                         Voor meer informatie over mijn diensten of bent u benieuwd naar prijzen en beschikbaarheid<br />
  36.                         neem gerust contact op via  of <a class="mailto" href="mailto:"></a>
  37.                     </div>
  38.                     <br />
  39.                     <div class="text contact">
  40.  
  41.                         <a class="mailto" href="mailto:"></a><br />
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </body>
  47. <html>
and this is my css
Expand|Select|Wrap|Line Numbers
  1. html{
  2. width:95%;
  3. height:530px;
  4. }
  5.  
  6. #background{
  7. float:left;
  8. margin-left:225px;
  9. }
  10.  
  11. .company{
  12. float:right;
  13. font-family:Forte;
  14. font-size:20px;
  15. color:purple;
  16. margin-left:5px;
  17. margin-bottom:500px;
  18. }
  19.  
  20. .text{
  21. font-family:Calibri;
  22. font-size:14px;
  23. }
  24.  
  25. .info{
  26. color:#551A8B;
  27. }
  28.  
  29. .advantages{
  30. color:#551A8B;
  31. }
  32.  
  33. .moreInfo{
  34. color:#551A8B;
  35. }
  36.  
  37. .contact{
  38. color:#551A8B;
  39. }
  40.  
  41. a.mailto{
  42. color:#551A8B;
  43. cursor:pointer;
  44. }
In Firefox and even in Internet Explorer the website is working properly. But again in Google Chrome it is looking very strange.
The website should be looking like there are 2 columns. One column (the left one) is the picture. The right one is some text. The columns should be in one straight line.
But somehow in Google chrome the first column is the picture and the text is on the right under the picture.

I can't give you a link to the webpage itself since it is not online yet. Still I hope you can give me some advice.

Thanks in advance,

Michael
Sep 7 '12 #1

✓ answered by ariful alam

give your image tag a class name, like:
Expand|Select|Wrap|Line Numbers
  1. <img class="img" src="" />
now add a css portion, like:
Expand|Select|Wrap|Line Numbers
  1. .img{
  2. float:left;
  3. }
this will work fine.

hope work. :)

2 2427
ariful alam
185 100+
give your image tag a class name, like:
Expand|Select|Wrap|Line Numbers
  1. <img class="img" src="" />
now add a css portion, like:
Expand|Select|Wrap|Line Numbers
  1. .img{
  2. float:left;
  3. }
this will work fine.

hope work. :)
Sep 11 '12 #2
michaeldebruin
134 100+
Thanks a lot Ariful, it indeed solved the problem.
Sep 11 '12 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: parksch2 | last post by:
I know there are a lot of articles out there about this subject but I have been reading for 3 hours and still can't find the answer. I have some text in a bunch of hidden spans. I need to find the...
5
by: Trenqo 0 | last post by:
Instead of doing repetitive checks throughout my code, or defining new methods that won't work unless they are included, I have taken the approach of redefining existing methods in order to make...
2
by: Lüpher Cypher | last post by:
Does anyone know of good links about cross-browser compatibility (html attributes/css2/javascript)? -- - lüpher --------------------------------------------- "Man sieht nur das, was man...
7
by: dejavue82 | last post by:
Dear Asp.net users, I have seen some people comment that their asp.net websites render differently with various web browsers. Are they doing somthing wrong? In particilar, 1) I am wondering...
1
by: prof_martin | last post by:
Hi Everyone, I got question from Customer. What kind of browser and version which can browse properly if application running on ASP.net v.1.1 or 2.0 beside IE.5x above? Firefox, Nescape,...
4
by: lanarkcp | last post by:
This section of code works perfectly in IE, but not Firefox or Netscape, where the paragraph formatting and color are lost. Suggestions?? Thanks. <head> <meta http-equiv="content-type"...
2
by: dwair | last post by:
Hi, I have been having browser compatibility issues and was wondering if anyone could help. I have been using a JavaScript array to populate marker data using ASP JS in a google Maps project. For...
3
dmjpro
by: dmjpro | last post by:
ActiveXObject is only supported by MS-IE or it is supported by others .... plz help me out .... thanx in advance .....
1
by: jonathanellis | last post by:
Hello: I am having a problem with a web site that i built not showing up properly in IE6. I haven't tested it in IE7, but I have tested it in Firefox and Safari. Both Firefox and Safari show the...
10
by: 101986 | last post by:
Hi, When i code a web page in XHTML, CSS, it works fine on mozilla, opera & google chrome, but gets distorted on internet explorer. Can you please suggest if i should use some specific coding...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.