1
Hi,
I have my resume in good old HTML with Tables and CSS.
I have two stylesheets, one to format for the web and the other for when I load the resume up into word - all works fine.
Now - I want to have another go at a new version - this time I want to rid myself of tables and do everything with CSS.
The code works fine in IE6 and Firefox but I load the HTML up into word it fails miserably!
The top 'box' when viewed in a browser correctly shows three 'cells' in a row (10%, 60% and 30% width) but when I load into word the widths all change to 100% and three separate lines
Here is the code
<CSS>
div.box { width: 100%; margin: 0px; }
div.box1 { width: 10%; border: 0px; float:left; background-color: gray; }
div.box2 { width: 60%; border: 0px; float:left; background-color: blue; }
div.box3 { width: 30%; border: 0px; float:right; background-color: green; text-align: right; }
div.boxline { width: 100%; border: 0px; background-color: yellow; font-style: italic }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Playing with CSS:1</title>
<link rel="stylesheet" type="text/css" href="web.css">
</head>
<body>
<!-- <div class="box"> -->
<div class="box1">Text 1</div>
<div class="box2">this is some more text</div>
<div class="box3">This is the end</div>
</div>
<div class="boxline"><b>test</b>
This is some text that should spread the whole width of the screen and wrap really nicely without shrinking the other 'cells'. The only trouble is I have to make sure the text wraps around on monitors with a higher resolution!
<br />Hey look no tables!
</div>
</body>
</html>
I think the problem is MS word - I also tried an example from w3schools - looks fine on the browser - but word screw it up!
Any one have any ideas I dont want to have to edit two resume's!
Many thanks
