Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Browser compatibility help

Featured Replies

I am new to these forums and one of the reasons I joined in the first place was because I cant get my page to open in a browser the same way it opens in Dreamweaver 8.

 

This is how it looks in Dw:

Picture4.png

 

This is how it looks in Safari:

None of the CSS for the font has picked up. It is in default Times New Roman. The "album" div to the right side has moved out of place. The orange background no longer shows up.

Picture5-1.png

 

This is how it looks in Mozilla:

The header image doesn't show. The album Div is misplaced. However the orange background and font style show fine.

Picture6.png

 

I am using a Mac, I dont know if that would make a difference? Is there some code I need to include?

 

Help!!

no, first things first never ever ever ever, rely on dreamweavers design mode, it hardly ever looks the same. you should do multiple tests through out the coding to make sure elements work :)

 

 

Second, can we have a link to the site, or the code if it isn't live, so that we can see what is going wrong and where :)

  • Author

I've been having this trouble since I started this website. I posted on another forum I use and even with the code they tried for me that worked for them. It still didnt work for me.

 

Nothing is online just yet but will be when I get a basic design finished and the content finialised.

 

<!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=ISO-8859-1" />
<title>Welcome to Project Lumino</title>
<link href="210508.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="header">
<h1><img src="headerlarge.jpg" alt="Project Lumino Site" width="834" height="107"/></h1>
</div>

<div id="navigation">

<ul>

<li>Home </li>
<li>Biography </li>
<li>Gallery</li>
<li>Music</li>
<li> Merchandise </li>
<li>Links</li>

</ul>

</div>

<div id="main">
<h1> </h1>
<h1>News</h1>
<p><strong><u>18.03.08</u></strong>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextexttextextextetxtetxtetxtetextextextextextextextex
</p>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextexttextextextetxtetxtetxtetextextextextextextextex
textextextetxtetxtetxtetextextextextextextextext</p>



</div>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextext.<br />
</p>
<p>Hope all is well and give me any feedback you can on my new song!!!</p>
<hr />
<p><u><strong>06.01.08</strong></u></p>
<p>I am now hand making the "Waking Up" album. Each cd cover will be made personally by myself for each order and they will all be unique. The cd's will be limited and will stop when the limited number is reached.</p>
<p>Two extra bonus tracks are included: <br />
 - Dont React ft Peppi Knott<br />
 - Early Days (re mixed & mastered) </p>
<p>To pay for it all you need is a Paypal account and submit £10 to the email address: buywakingup@hotmail.co.uk. The page should look like this:</p>
<p>Main Page> Send Money></p>
<p>To: buywakingup@hotmail.co.uk<br />
 Amount: 10<br />
 Currency: GBP British Pounds<br />
 Usage: Gift›</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<p>

</div>

<div id="album">
<img src="../PL FINAL COVER.jpg" alt="Waking Up" width="176" height="180"/>
<h2>Debut Album - Waking Up</h2>
<p>If you would like to listen to my album it is available to purchase from:</p>
<li>iTunes</li>
<li>Amazon mp3</li>
<p>To order a special hand-made album you will need a Paypal account. </p>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

</div>
</body>
</html>

</div>

Dreamweavers in-built preview is notoriously unreliable as as Dizi said don't rely on it - always test in real browsers!

 

Considering how expensive Dreamweaver is I'm still surprised that they haven't integrated proper previewing that's found on many other editors.

  • Author

Here is the CSS

/* CSS Document */

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

body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px;
background-color:#FF9933;
margin-left:250px;
margin-right:250px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

h1, h2, h3, h4 {color:#000000; font-weight:bold; text-transform:capitalize; font-size:12px;}
h1 {
margin:0px;
font-size:18px;
}
h2 {
margin:0px;
}

#wrapper {
width:750px;
margin:auto;
background-color:#FFFFFF;}

#header {
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
}


#navigation li {
display:inline;
font-size:14px;
}

#main {
background-color:#FFFFFF;
float: left;
margin:0px;
width:657px;
}

#album {
float:right;
margin:0px;
width:175px;
background-color:#FFFFFF;
}

  • Author
Here is the CSS

/* CSS Document */

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

body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px;
background-color:#FF9933;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

h1, h2, h3, h4 {color:#000000; font-weight:bold; text-transform:capitalize; font-size:12px;}
h1 {
margin:0px;
font-size:18px;
}
h2 {
margin:0px;
}

#wrapper {
width:834px;
margin:auto;
background-color:#FFFFFF;}

#header {
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
}
#navigation li {
display:inline;
font-size:14px;
}

#main {
background-color:#FFFFFF;
float: left;
margin:0px;
width:657px;
}

#album {
float:right;
margin:0px;
width:175px;
background-color:#FFFFFF;
}

 

I've made a slight adjustment to it now. I changed the width of the wrapper to 834px so now the album div stays in place in the browsers. Now in Mozilla everything is fine apart from the header image not showing (but the album image shows fine) and in Safari the lay out is ok and both images show but it isn't picking up any css on the font style or color background :huh:

  • Author
Here is the CSS

/* CSS Document */

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

body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px;
background-color:#FF9933;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

h1, h2, h3, h4 {color:#000000; font-weight:bold; text-transform:capitalize; font-size:12px;}
h1 {
margin:0px;
font-size:18px;
}
h2 {
margin:0px;
}

#wrapper {
width:834px;
margin:auto;
background-color:#FFFFFF;}

#header {
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
}
#navigation li {
display:inline;
font-size:14px;
}

#main {
background-color:#FFFFFF;
float: left;
margin:0px;
width:657px;
}

#album {
float:right;
margin:0px;
width:175px;
background-color:#FFFFFF;
}

 

I've made a slight adjustment to it now. I changed the width of the wrapper to 834px so now the album div stays in place in the browsers. Now in Mozilla everything is fine apart from the header image not showing (but the album image shows fine) and in Safari the lay out is ok and both images show but it isn't picking up any css on the font style or color background :huh:

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.