Can someone take a look??

  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Hi

Still breaking my balls over this website. I was hoping someone could go and have a look at the page I'm trying to sort out and let me know four things:

1. If it's coded ok
2. why the top right hand image won't go back a pixel even if I make the image one pixel smaller!
3. How can I make those grey boxes with a 1px border WITHOUT having to make them a graphic? Is there a way to do this in my css style sheet?
4. ANY SUGGESTIONS on how to better code this page??


http://hem.bredband.net/neuntoter/allied/index2.htm
the text is nonsense taken from another site as filler.

Please be gentle :| this is my first real website

THANKS in advance
Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

1) Take a look here.

2) Haven't got a whole lot of time, but I'm assuming there's something not adding up right.

3)
HTML Code: [ Select ]
<div class="greybox"><p class="greyboxheader">Benitifs of recycled Printing Material<p>Initially, the majority of efforts were focused on projects that would make internal process improvements and reduce the company’s enviro...</div>

CSS Code: [ Select ]
.greybox {
padding: 10px;
background: #efefef;
border: 1px solid #ccc;
}
 
  1. .greybox {
  2. padding: 10px;
  3. background: #efefef;
  4. border: 1px solid #ccc;
  5. }
  6.  


4) Ditch the top dark grey box between the navs; Add a footer, fix a few of the spelling mistakes (Benitifs?). As this isn't the review forum I won't go into much more detail, but the site looks pretty clean.
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Cheers neksus!

That validator is a great site! never knew it was there before. Seemed a lot of my mistakes are pretty smal, leaving in deleated end tags etc. For my first time coding a page like this, I'm pretty happy.

Thanks also for the css for the greybox!! Wasn't sure if it was possible! Is there any other little things like that I should look into?

The dark grey bar just underneath the menu is going to have the submenus in it. Another problem I'll be posting here about later ;) Though not sure what I'll use the right hand one for. I tried using tabs first but just couldn't get them looking right.
All the spelling mistakes will be sorted when i put proper text in there. just trying to fix all the small things at the moment

about the top image. Do you mean that some row(s) are pushing it out? I checked and the top row is adding up to 814 when it should only be 813. When i change it, the top right image moves to the right and leaves a big gap between itself and the logo. tried making the logo 1px smaller and it does the same thing. Could be something further down thats doing it?

oh and err, what do you mean by a footer??

Thanks again! Much appreciated
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Also two other things.

I checked the site in IE, Safari and Firefox and noticed that the right hand columns dark bg colour doesn't appear in Firefox. anything I can do about it?

Code: [ Select ]
<td width="194" rowspan="2" align="center" valign="top" bgcolor="353434"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th colspan="3" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <th colspan="3" scope="col"><img src="images/leftmenu_spacer
  1. <td width="194" rowspan="2" align="center" valign="top" bgcolor="353434"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  2.             <tr>
  3.               <th colspan="3" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  4.                 <tr>
  5.                   <th colspan="3" scope="col"><img src="images/leftmenu_spacer
.gif" width="195" height="6"></th>
</tr>

secondly, what are the benefits of xhtml? And is there a way to convert my site to it? So far on the three browsers and OS I checked the only problem is the right hand column bg colour.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

About the problem with the bgcolor... it is missing the "#" in front of the numbers.

About XHTML... It is best to have your site in XHTML. It is not too hard to change to XHTML but that may seem to me as I have done a couple XHTML valid sites and know CSS probably a little bit better than you.

XHTML is using CSS rather than TABLES as you are right now.

A footer is a DIV or TABLE at the very bottom with a copyright information... if you want an example of one, Starbucks homepage... It is in the grey box that has the copyright information in it.
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

:oops: I was staring at that for almost an hour and didn't spot it! Maybe you ca see why the top right bg image won't line up?? I'm totally out of ideas on it. tried resizing it..everything. it either gets worse or stays the same.

Thanks for the info on the css! Must try and learn that! Right now (this is my first website), just trying to get my head round css for text and some boxes. Will get some tutorials and fingers crossed! What are the problems that could arise from using tables?? I tested the page in three browsers and two OS and no problems YET. The site validator website gives me a list of errors but mostly they are: required attribute "ALT" not specified.

Thanks again for all the info and help! Much appreciated!

Bogey wrote:
About the problem with the bgcolor... it is missing the "#" in front of the numbers.

About XHTML... It is best to have your site in XHTML. It is not too hard to change to XHTML but that may seem to me as I have done a couple XHTML valid sites and know CSS probably a little bit better than you.

XHTML is using CSS rather than TABLES as you are right now.

A footer is a DIV or TABLE at the very bottom with a copyright information... if you want an example of one, Starbucks homepage... It is in the grey box that has the copyright information in it.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

No problem Allied77 glad to be of some help...

About the top right bg image... everything seems to line up except the very bottom left content bg... "Benitifs of recycled Printing Material". The very last one... it seems to extend a bit to the right...

Is that what you are talking about? If not, than I must not be catching it...
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Yeah I just noticed that to. You're using firefox, right? It lines up in IE. It's actually the only bit of css on the page :lol: and I can't get it work properly. The size I set in dreamweaver but the code of what a poster here suggested. Did the job perfectly (creating a box) but I can't get firefox to recognise the width of it!?

Nah, I meant the first frst image on the top right hand corner. You can see that it doesn't line up correctly with the border of the page. The logo and that image are 1px larger than the rest, but when I either make the image 1px smaller or make the table smaller the right hand image jumps even further to the right. It's got me totally confused, not to say fustrated! :hmm:

Bogey wrote:
No problem Allied77 glad to be of some help...

About the top right bg image... everything seems to line up except the very bottom left content bg... "Benitifs of recycled Printing Material". The very last one... it seems to extend a bit to the right...

Is that what you are talking about? If not, than I must not be catching it...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

For what it's worth, XHTML can have tables, too :P
It's just semantically free of errors to provide browsers with a standardized set of rules on how to parse it and to give a better uniform look globally.
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

neksus is there a way I can set the width of the grey box you showed me how to make above? The width I set works in IE but not in forefox. any ideas??
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

width: 400px;

If you're using padding or margins, you're probably experiencing collapsing margins or the mozilla/ie box model variations. If you can post your box CSS we can probably narrow it down ;)
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Cheers neksus!

Heres the css I have for the box

Code: [ Select ]
.greybox {
    padding: 3px;
    background: #efefef;
    border: 1px solid #ccc;
    margin: 0px;
    width: 585px;
}
  1. .greybox {
  2.     padding: 3px;
  3.     background: #efefef;
  4.     border: 1px solid #ccc;
  5.     margin: 0px;
  6.     width: 585px;
  7. }


:hmm:

neksus wrote:
width: 400px;

If you're using padding or margins, you're probably experiencing collapsing margins or the mozilla/ie box model variations. If you can post your box CSS we can probably narrow it down ;)
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

So the width isn't working in Firefox? Or is it slightly larger in Firefox?
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Yeah, I set the width initally just on the box itself in dreamweaver which works fine, except in firefox. when i set the width in css it doesn't work anywhere. could it be because i have it in a table?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Maybe...if the table/td width is defined then the greybox can only be as large as the td it's nested in.
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

The td it's in is 100%. If I just select that row (where thegreybox is) and make it the width I want it works in IE but not FF. Does this mean that the css box will go automatically the size of the rest of the table?

If I make the box smaller in the css it DOES go smaller but centres the box. I wanted to have it at 585 but seems that i have to make it even smaller than that to be the same size as the boxes above that are 585 :lol:

any ideas?
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

Woah! I think I got it:

Code: [ Select ]
.greybox {
    padding: 3px;
    background: #efefef;
    border: 1px solid #ccc;
    margin: 0px;
    width: 577px;
    float: left;

}
  1. .greybox {
  2.     padding: 3px;
  3.     background: #efefef;
  4.     border: 1px solid #ccc;
  5.     margin: 0px;
  6.     width: 577px;
  7.     float: left;
  8. }


Didn't know float is css speak for align!
Works in FF and IE now.

I had to make the box 8px smaller than the ones above it to make it work though. Why is that? Seems like it was the padding that messed with the size of the box?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

float isn't align lol
although, since you're using tables, float will work quite nicely :)
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

neksus wrote:
float isn't align lol
although, since you're using tables, float will work quite nicely :)


it isn't? :lol: what is it then??
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

:hmm:

A member of this forum (XHA) was kind enough to send me an error report on my site. When tested in IE8 theres gaps all over the place (this site has problems in IE8 also btw and awhole load of other sites). Just when I got it working in IE7 with almost no problems (well..you know :wink: ) I run into awhole other set of issues. There are issues in FF2 but the absolute worst has to be IE8

http://www.juice49.com/mark/ie8b.jpg

anyone have any ideas?? I swear I'm ready to pack this in :lol: I never felt this annoying to others :lol:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Lol, your not annoying... don't worry about IE8 though as it's still in BETA mode I think
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

Man try to get ridd of the tables.. divs are more flexible.. tables are used these days with css for databases more rather than for actual design.. and also it takes less time building up with divs than tables:)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I disagree about using tables for databases. Well, most people probably are using those things for databases because of loops, but I find looping <div>...</div> a bit easier rather than <tr><td>...</td></tr> or just the <td>...</td>... thing. But it's up to the programmer's preference.

And if you have read the second post and on from than... you would have noticed that that has being already suggested. Glad you agree though :P

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.