AndrewS Posted October 29, 2013 Report Posted October 29, 2013 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
Andrea Posted October 29, 2013 Report Posted October 29, 2013 We need yo see your code - all the HTML and the CSS.
falkencreative Posted October 29, 2013 Report Posted October 29, 2013 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.
AndrewS Posted October 30, 2013 Author Report Posted October 30, 2013 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
kralcx Posted November 2, 2013 Report Posted November 2, 2013 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.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now