/    Sign up×
Community /Pin to ProfileBookmark

conversion to xhtml, alignment prob.

Copy linkTweet thisAlerts:
Mar 03.2003

Well I’ve gotten back to working on my website to be, and again have come up with problems. Also again, the problems deal with alignment.

my top-right links need to be right aligned, and of course they only do so in IE due to the text-align:right bug. So, some help there would be appreciated.

Also, I’m trying to figure out how to section off the large posting section. I think I might have problems like i do with the header on top, not sure though.

the page i’m converting from is here:
[url]http://www.geocities.com/manhattanseniors/17thdegree/test3.html[/url]

The page i’m converting to is here:
[url]http://www.geocities.com/manhattanseniors/17thdegree/template.html[/url]

My many thanks go out to all of you who keep helping me with this… 🙂

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanMar 03.2003 — Doesn't a simple

.topSection div {text-align:right}

do what you want?
Copy linkTweet thisAlerts:
@thejoker101authorMar 03.2003 — apparently not...

It's in there and isn't working now... so I dunno...
Copy linkTweet thisAlerts:
@StefanMar 03.2003 — [i]Originally posted by thejoker101 [/i]

[B]

It's in there and isn't working now... so I dunno... [/B][/QUOTE]

No, you got

.topSection img {

border-width:0px;

display:block;

text-align:right;

}

That is VERY different from

.topSection div {text-align:right}
Copy linkTweet thisAlerts:
@thejoker101authorMar 04.2003 — Unless I missed it, yet again, which is entirely possible, I made the change, and still have the problem...
Copy linkTweet thisAlerts:
@StefanMar 04.2003 — [i]Originally posted by thejoker101 [/i]

[B]Unless I missed it, yet again, which is entirely possible, I made the change, and still have the problem... [/B][/QUOTE]

You need to remove the .topSection img {display:block} rule of cource, or text-align:right on the div will have no effect.
Copy linkTweet thisAlerts:
@thejoker101authorMar 04.2003 — The problem now is that I get spacing underneath the images, I believe this is the problem netscape has with images. Having the display:block fixed that...
Copy linkTweet thisAlerts:
@thejoker101authorMar 05.2003 — it otherwise looks fine in IE and Opera, but netscape, those spaces under the images...
Copy linkTweet thisAlerts:
@StefanMar 05.2003 — img {vertical-align:bottom;} should fix the spaces for inline images
Copy linkTweet thisAlerts:
@thejoker101authorMar 05.2003 — That changed a couple things.

1) in netscape only the images that weren't used as links moved up, but it seemed to be a step in the right direction.

2) in opera, when i mouse over a link, i get a purple bar covering the images not used as links.

3) in ie i get spacing below the images not used as links

So I dunno, it's starting to seem like it's not possible...
Copy linkTweet thisAlerts:
@StefanMar 05.2003 — [i]Originally posted by thejoker101 [/i]

That changed a couple things.

1) in netscape only the images that weren't used as links moved up, but it seemed to be a step in the right direction.
[/QUOTE]

I would assume all images would be affected, but you might have some other rule overriding it somewhere in your CSS file.

As a fist step you could try to also specify it for

a img { }


2) in opera, when i mouse over a link, i get a purple bar covering the images not used as links.
[/QUOTE]
?

Which version of Opera and does every single image on the page get a purple bar over it when you mouse over a link?


3) in ie i get spacing below the images not used as links
[/QUOTE]

Again which version and does it come from removing display block or from adding vertical-align:bottom ?

I know IE is a bit buggy with vertical align, but I don't recall bumping into anything that was not fixable in it, so it should work one way or the other.

In any case, I don't have time nor access to multiple browsers untill this weekend so unfortunately I can't test stuff out for you until then.
Copy linkTweet thisAlerts:
@thejoker101authorMar 05.2003 — For reference, I'm using IE 6, Opera 7, and NS 7.01.

I tried your suggestion with a img {vertical-align:bottom;} to no avail. I also tried going into the html and adding a style="vertical-align:bottom" on the images that were messing up, both the ones used as links and those not, it didn't change anything.

With opera, no, not every image gets a purple bar over it, on the page, on the top right section, when i mouse over either, "about 17", "sitemap", "favorite" a solid purple bar, the size of the image between those linked pictures, occurs over that image between them.

The problems of extra space seem to come from the vertical-align. if i remove the vertical-align and add the display:block, everything is perfect, except in Opera and NS the links are aligned to the left instead of the right. However when i remove the display block, the links are pushed to the right but there is spacing between all the images. when i add the vertical-align:bottom, only some of the spacing is taken care of.
×

Success!

Help @thejoker101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...