Jump to content

Problem With Expression Web 4...


AndrewS

Recommended Posts

I have a problem with EW4. I have created a web page which contains several divs, which are defined in a css file. So far, so good. The problem is that when I add some content to one or more of the divs, the page layout in EW4 gets altered (i.e. the divs seem to move from their intended position). The odd thing is that if I save the page and then view it in a browser (IE or FF) it looks fine.

 

Any help gratefully received.

 

TIA

 

Andrew

Link to comment
Share on other sites

If it's displaying wrong within EW4, but fine in the browser, then it sounds like it's a EW4 bug, not really an issue with your code. WYSIWYG style editors aren't always perfect, but as long as the browser shows the site error free, you're fine. In short, trust the browser your visitor's will be using, not EW4's (or Dreamweaver's, or similar WYSIWYG editors) potentially buggy preview.

 

I would check the site in IE as well, just to make sure that there aren't any bugs there. I'm not sure if EW4 uses IE's rendering engine or not.

Link to comment
Share on other sites

Thanks for the replies both. The page looks fine in IE and in FF so I agree the problem probably lies with EW4; it's still usable, just a bit of a pain.

 

The CSS code is as follows:

 

body

{

background-image: url('images/lilac.tile.jpg');

}

#upperleftDiv

{

position:absolute;

width:20%;

height:650px;

border-bottom:medium #675472 solid;

font-weight:normal;

background-image:url('images/lilac.tile.jpg');

}

#uppermiddleDiv

{

position:absolute;

width:60%;

height:650px;

border-bottom:medium #675472 solid;

overflow:auto;

margin-left:20%;

background-image:url('images/lilac.tile.jpg');

border-left-color:#675472;

border-left-style:solid;

border-left-width:medium;

}

#upperrightDiv

{

position:absolute;

width:20%;

height:650px;

border-bottom:medium #675472 solid;

font-weight:normal;

margin-left:80%;

background-image:url('images/lilac.tile.jpg');

border-left-color:#675472;

border-left-style:solid;

border-left-width:medium;

 

}

#buttons

{

position:absolute;

width:100%;

height:50px;

margin-top:660px;

font-weight:normal;

text-align:center;

background-image:url('images/lilac.tile.jpg');

}

#copyright

{

position:absolute;

width:100%;

height:40px;

margin-top:710px;

font-weight:normal;

text-align:center;

background-image:url('images/lilac.tile.jpg');

top: 0px;

left: 10px;

}

 

And the HTML is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>

 

 

 

<meta content="en-gb" http-equiv="Content-Language">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>Home Page</title>

 

<link href="main.css" rel="stylesheet" type="text/css"></head><body>

<div id="upperleftDiv"></div>

<div id="uppermiddleDiv"></div>

<div id="upperrightDiv"></div>

<div id="buttons"></div>

<div id="copyright"></div>

</body></html>

 

Thanks again

 

Andrew

Link to comment
Share on other sites

AndrewS

in the future try a service like http://codepen.io/ to place your code, if you don't have an actually website url to share. Codepen makes it easy to share your code with others when you need help. If at all possible we would like to see the code in the actual website; that is the best way (and easier way) to troubleshoot for any problems.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...