[RESOLVED] Four solutions needed to finish a project

[rickduley]

Hi all

My webpage project has consumed my waking hours for the last couple of weeks. The current state of the project is at http://rickduley.webs.com/Sample-Webpage.html (and the current code div-CSS-ignored.zip is attached. If you view the webpage you will see that there are four issues:

1. The 'pale gold' screen colour (see #screen at line 8 of standard.css) does not extend to the perimeter of the screen;
2. The 'pale gold' screen colour stops altogether at the bottom of the breadcrumbs line;
3. The borders and background colour of #canvas (line 85 of standard.css) are not displayed;
4. .mainText and .sidebar, (both in standard.css) which are encapsulated within #canvas, will not display side by side if their cumulative width is 100%. :confused:

After a fortnight's work I am down to these four problems. From experience with other languages, they probably stem from one simple mistake somewhere. However, my experience in HTML and CSS is insufficient for me to see what is probably staring me in the face.

I hope someone can solve these issues so I can get on with something productive. :)
Thanks

[WebJoel]

line 60 column 19 - Warning: <img> attribute "width" has invalid value "32px"


Many errors like this.

Width="32px" is invalid. "px" is CSS, not HTML

Either

width="32"

or

<style width:32px; >

More to come...

(having difficulties w/ my pass here... may not be here for long... getting it figured out tho;..)


First biggest 'help' is for you to add this as your FIRST rule in the CSS file:

html, body {padding:0; margin:0;}

Solves a host of cross-browser ills (nearly all IE-related)

[tjedgar]

1. As mentioned above this is without doubt down to the innate padding applied to the body, adding body { margin:0;padding:0; } will fix this

2. This is due to a clearing issue caused by some of your floats, by adding <div style="clear:both;"></div> just before the closing div for your #screen div will fix this for you. either that or if you want to make it so the pale gold fills the ehtirety of the background, move the background color from #screen to the body tag.

3. this is again a clearing issue, by placing <div style="clear:both;"></div> before the closing of your canvas div will fix it for you.

4. from looking at your style sheet, this strikes me as being due to the margins on your .sidebar this adds to your width, so when set to 100% it would in fact bee 100% + 16px thus causing them to not line up.


Hi all

My webpage project has consumed my waking hours for the last couple of weeks. The current state of the project is at http://rickduley.webs.com/Sample-Webpage.html (and the current code div-CSS-ignored.zip is attached. If you view the webpage you will see that there are four issues:

1. The 'pale gold' screen colour (see #screen at line 8 of standard.css) does not extend to the perimeter of the screen;
2. The 'pale gold' screen colour stops altogether at the bottom of the breadcrumbs line;
3. The borders and background colour of #canvas (line 85 of standard.css) are not displayed;
4. .mainText and .sidebar, (both in standard.css) which are encapsulated within #canvas, will not display side by side if their cumulative width is 100%. :confused:

After a fortnight's work I am down to these four problems. From experience with other languages, they probably stem from one simple mistake somewhere. However, my experience in HTML and CSS is insufficient for me to see what is probably staring me in the face.

I hope someone can solve these issues so I can get on with something productive. :)
Thanks

[rickduley]

Thank you folks.

I could have gone on tearing out what is left of my hair forever, and still not have come up with those solutions. :) Thank heavens for forums like this.