Back with a Problem about vertical alignment

[FONT=Verdana]Antony,

My last “Try this” idea was not the best. The original css was essentially correct.

The following changes will make your page render properly in IE 8 and 9, FF 18, and Chrome 23.

B [/B]Please change the following lines in your css…

censusstyle.css - Line 172


.test p.rotate {
    display:[color="#0000ff"]inline-block[/color];      /* was:  display:block; */
    [color="#ff0000"][s]white-space:nowrap;[/s][/color]    /* Delete.  Not necessary. */

ALSO, at the bottom of the css sheet, ADD a semicolon after the the word “super” and put a close curly brace on the next line (they were missed when you copied my code).

B[/B] Make the following HTML changes on ALL pages that use this rotated text:

From:


<!--[if lte IE 8]>
<style type="text/css">
p.rotate {
    writing-mode: tb-rl;
    filter: flipv fliph;
    display:inline-block;
    *display:inline;
    zoom:1.0;
    letter-spacing:1px;
    width:auto;
}
</style>
<![endif]-->

To:


<!--[if lte IE 8]>
<style type="text/css">
.test p.rotate {
    writing-mode: tb-rl;
    filter: flipv fliph;
    display:inline-block;
    *display:inline;
    zoom:1.0;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style type="text/css">
.test p.rotate {
    display:block;
}
</style>
<![endif]-->

B[/B] REMINDER: Please CHANGE the HTML on the bottom row, last column of table class=“test” on ALL of these pages:

From:


<td><p class="col9">

To:


<td class="col9"><p>

B[/B] I recommend the following css change to remove IE’s default border from around anchor images:

censusstyle.css - Line 117
From:


a img {display:block;}

To:


a img {display:block; border:0;}

B[/B] Picky HTML details (treatment for insomnia):

(5-A) On the HTML pages, Row 3, Columns 1, 7 & 8, you can delete the " "s if you wish; they are harmless but unnecessary. A little more work for the browser to do.

(5-B) Likewise, in Column 4, you can delete the string of " " preceeding the “U”. They are moving the string “U S D” a little off center.

(5-C) Near the bottom of the HTML page, delete the red code because it is invalid code (it contains no units of measure) and is not doing anything at all. The buttons are being rendered at their default dimensions.


<button [color="#ff0000"][s]style="width:150;height:30"[/s][/color] ONCLICK.....

B[/B] Gee Wiz:

For my notes: What is the php code that you are using to call the drop-down menu code?
[/FONT]

Thanks for this additional help.

I have done it all thanks

When you say call the drop down menu code is this what you mean ?

<!-- BEGIN menu.php INCLUDE –>
<?php include $_SERVER[“DOCUMENT_ROOT”] . “/c5dincludes/c5dmenu.php”; ?>
<!-- END menu.php INCLUDE –>

Or did you mean the URL of the drop down menu ? www.c5d.co.uk/c5dmenu.php

Thanks

Antony

Wow, Antony, that was really quick! Looks good in all of the browsers on my PC, too! Unless someone reports an unanticipated problem, I think we can call this a wrap. Thanks very much for your patience and for putting up with my re-dos. It has been a great learning experience for me.

When I sent a recent post, you mentioned that I had “tested” you by including the wrong php code on the page. I just want to update my notes in case it’s needed again. :slight_smile: Thanks a bunch!

I may go to bed before dawn tonight. :slight_smile:

OK, that’s when I get up, just before dawn !

Are you any good on HTML e mails ?

That’s my only outstanding task for this project

Have a good sleeo

Antony

No, I have no experience with HTML e-mails, like newsletters. I can work with tables comfortably enough, so if you have a formatting problem, I should be able to pitch in; but otherwise, I’m probably useless. I feel sure you will find help in the HTML forum, though.

Best to You, Antony.

Well, I did post there and all I got really was that i couldn’t be done.

What I want to do is use the drop down menu bit of the web pages you have contributed to at the top of the E Mail.

I tried to put it in a table but all the formatting has disappeared. My efforts are at www.c5d.co.uk/test.html

I just want a starter so that I can try it. BUT NOT NOW when it’s whatever time where you are !

Antony

I will look into the HTML mail question tomorrow. So far, it does not look promising, though. The two gentlemen who responded to your message are the very ones I would have approached with such a question because of their experience. If they suggest that it’s probably not worth the effort, or will most likely be unworkable, then I doubt I can improve on their prognosis… especially since I have zero experience with HTML e-mail. I will look at it, though, because it is something new to learn.

On a different subject, do you remember the name of the font/s that are used on the image with your company name and address? It is a nice handwritten style and I would like to find it, if it’s available for the PC.

The handwritings styles are as follows:

  1. Certificates in 5 Days is in Script MT Bold which is in Word 2010 where I designed the template before pasting into irfanview as an image

  2. The address is in Lucida Handwriting.

Both are in bold and the Script is a very small font, so you may need to have it quite large

I guess you didn’t make it to bed before dawn then !

Antony

Dawn is still several hours away. My time zone is UTC-5. It’s 3am now.

Thanks for the font info. I’ll look those up, if I can. They seem quite legible.

Hey, Antony, what do you think of this “look” at the top of your site? The background color is a little lighter which, as @ralph_m mentioned, makes the page easier to read and makes your red logo considerably more visible. Lucida Handwriting apparently is not available in a native bold format, so I used an italicized serifed font instead. If you are interested in this or some variation thereof, let me know.

Cheers

It looks nice thanks, what colour number have you used ? It’s #708090 at present.

There is one thing about the address, it is in an image at present to avoid the e mail address being battered with spam. Have you done it the same way ?

I might try and play about with the background colour this morning

Thanks

Antony

[FONT=Verdana]Very cool; glad you like it.

The attached .png file is the header shown in the previous picture. The text is written on a transparent background that is the exact width of the page. You can change the background color of your pages in the css file to anything you wish. The previous example picture shows

body {background-color:#9ab;}

Most of the action takes place in the first div in the c5dmenu.php file:

Delete all of the first div…

[color="#ff0000"]
        <div id="header" class="span-24" style="height:180px;">
            <div class="span-12">
                <img src="http://www.c5d.co.uk/c5dbackground.png" alt="my address" height="175" width="650" />
            </div>
            <div class="span-12 last" style="padding-top:30px; text-align:right;"></div>
        </div>[/color]

Replace it with:

[color="#0000ff"]
        <div id="header">
            <img src="http://www.c5d.co.uk/c5dLogo5.png" alt="c5dLogo" width="950" height="115">
        </div>[/color]

The omitted lines are serving no purpose. Those classes do not exist in the css file, and the inline styles are counterproductive or useless. You can, of course, change the name of the new header image to anything you wish. Please do maintain the indented alignment. :slight_smile:

      • c5dLogo5 - - -

Just for the heck of it, I applied one small tweak to the advert images. This will round the corners of those ads just enough to hide the white corners on the first advert. If you’re interested. You may wish to target only the first advert.

I located the change with the other #advert ids in the css file.


#advert1 a, #advert2 a {display:block;}      /* EXISTING LINE (for reference) */
[color="#0000ff"]#advert1 img, #advert2 img {border-radius:7px;}[/color]    /* ADDED NEW LINE */

If I kept my notes straight, the new header and the advert tweaks should work. Please let me know if there are any problems.[/FONT]

That’s great. I have rounded the corners which the CSS on all five stylesheets that relate to this ite, but I cannot download the png because it is waiting for site point approval.

With regard to the useless markup. The C5D bit was originally based on this site http://www.c5d.co.uk/index.php

It seems to have the same starting point. Is there any conflicting detail there ?

Thanks

Antony

None of those “useless” classes show up on the ed stylesheet. I left “#header” just because the div surrounds the page header, not because it provides any functionality. #header doesn’t appear in the css either.

On the index page, .span-24 is first coded with a group that float:left and margin-right:10px. A few lines later, .span-24 is assigned width:950px and margin:0. It doesn’t seem to be necessary up top, but oddly is used icw the links long the right of the page. Only thing I can say for sure is that .span-24 is not needed on the ed pages. .span-12 doesn’t look like it’s doing anything useful on the index page, either; but can’t say for sure without testing. That code on index is a little odd.

Don’t know how long the approval period is for the image.

Thanks, I shall have a look at that tonight.

I couldn’t download the image still, so copied and pasted the one from the first example you sent and created an image from there.

It isn’t transparent, but the colour is the same as the background so works effectively.

Thanks again for the help

Antony

The c5dmenu.php code still has too may divs in it… too may lines. There should only be 3 lines in that top div… the opener, the image and the close; and the inline styles should be gone. See my example, please. You can fix that now and plug in the real .png image when it becomes available. The .jpg looks a little rough. :slight_smile:

Good night.

OK, it’s fixed.

Will await image being available

Antony