How do i make my site works with all browsers

J

junery00

New Member
hi i recently upload my site from dreamweaver to my host , but i'm having some issues with the images , I check my page with different browsers and the images on my site some look scramble in my site , is there a easy way to fix that?
 
leroy30

leroy30

New Member
Well there's no magical wand waving technique that I know of. You simply need to test test test in all major browsers before you do a launch!
 
J

junery00

New Member
sorry I think i post the wrong question , ok here is what i'm facing with my site i upload it and to my host but there is only the images im my container id having problem , some images appear scramble when i try with a different browser
 
Phreaddee

Phreaddee

Super Moderator
Staff member
you've said the same thing.
and on both times failed to give us a live link, ie the website in question
also "different" browser could be anything, so be specific. if its firefox say so, if its ie 6,7,8,9,or 10 say so. and "scramble" is also up for interpretations.
 
F

FrontPage97

New Member
Also test how your site looks under different browser zoom settings (75%, 100%, 125%, etc) With your browser open, hit Ctrl plus the "+" or "-" sign to quickly change zoom settings. Different computer users use different browser settings.
 
Edge

Edge

Member
junery00 said:
hi i recently upload my site from dreamweaver to my host , but i'm having some issues with the images , I check my page with different browsers and the images on my site some look scramble in my site , is there a easy way to fix that?
Click to expand...
Well given that you haven't actually provided a link to your site and you seem to think we are telepaths then the only advice I can give which I know will remove any problems is to delete the site.
 
D

dynaweb

New Member
Try a good sitebuilder man

For those without much technical HTML knowledge, I recommend a solution that is easier than Dreamweaver. For example, my web host offers a Sitebuilder Plan that uses an easy drag&drop interface. Here is a Demo to see what I am referring to.

Otherwise, if you stay with Dreamweaver (or Expression Web) you may want to hire a web designer to assist you. I am sure you can come into contact with one locally or on this web forum.
 
Last edited:
chrishirst

chrishirst

Well-Known Member
Staff member
some images appear scrambled
Click to expand...
Probably uploaded in the wrong FTP mode, images should use Binary mode NOT ASCII mode.

And please NOBODY should use Parallel's site builder for anything other than a personal 'hobby' website.
 
J

junery00

New Member
here is my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
</style>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style></head>

<body bgcolor="#FFFFFF">
<div id="Outline">
<div id="pic_2">
<div align="center"><img src="images/Computer-Repair-wilmington-NC.jpg" width="287" height="200" /></div>
</div>
<div id="Header">
<div align="center">
<div id="mac_logo">
<p><img src="images/Windows-Vista-vs-Mac-OS-X-Video-Demonstration-21.png" width="260" height="260" /></p>
<p><strong>We repair MAC and WINDOWS</strong></p>
</div>
<img src="images/baner.jpg" width="573" height="96" /></div>
</div>
<div id="tex_pic">
<p><img src="images/Computer-Repair-Sacramento.jpg" width="231" height="219" /></p>
<strong>The Best Service in Los Angeles Ca we provide the following services.
<li>Virus Removal </li>
<li>Software </li>
<li>Hardware </li>
<li>Upgrades </li>
<li>Hard Disc </li>
<li>Memory </li>
<li>Fans </li>
<li>Motherboard </li>
<li>Power Suplly </li>
<li>Broken Screen
<h1> HABLAMOS ESPANOL</h1></li></strong>
<p>Call to make an Appointment </p>
<p>Loreto @ 213.884.7056</p>
<p>Gabriel @ 323.448.8941 </p>
<div id="coms"><img src="images/compus.jpg" width="532" height="180" /></div>
<p>or send us a <a href="mailto:[email protected]">E-mail</a></p>
</div>
</div>
 
J

junery00

New Member
and here is my css style

@charset "UTF-8";
/* CSS Document */

#Outline {
height: 800px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
text-align: left;
background-color: #FFF;
font-size: 9px;
}
#Header {
padding: 0px;
height: px;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
background-color: #FFF;
}
#Footer {
height: 25px;
width: 600px;
margin-right: auto;
margin-left: auto;
}

#text1 {
margin: 0px;
padding: 0px;
height: 200px;
width: 200px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position: absolute;
left: 60px;
top: 300px;
}
#tex_pic {
height: 240px;
width: 250px;
font-size: 16px;
}

#text_1 {
height: 200px;
width: 200px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position: absolute;
left: 10px;
top: 100px;
}

#pic_2 {
height: 200px;
width: 200px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
left: 700px;
top: 120px;
margin: 0px;
padding: 0px;
}

#Outline #tex_pic strong li h1 {
color: #F00;
}
body {
background-color: #66CCFF;
}

#mac_logo {
height: 250px;
width: 300px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 700px;
top: 350px;
font-size: 16px;
position: absolute;
}

#coms {
height: 180px;
width: 400px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
left: 550px;
top: 600px;
}
 
chrishirst

chrishirst

Well-Known Member
Staff member
Get rid of those position: absolute; rules


NOW!!!!!!!!!!!!!!!!!!!!!!!!!!



That is WHY it doesn't work
 
TheLIWebGuy

TheLIWebGuy

New Member
I like to use http://www.browserstack.com and I also use an old PC next to my mac to constantly test ..
I try to make sure that all the sites I work on work on ie8 and up
you will go crazy designing all the way back to ie5!

start with the hardest browser and work your way forward from there ... good luck!
 
You must log in or register to reply here.
Top