Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

In need of XHTML/CSS help

R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Hello. I'm trying to align some text and images. I have one div, and I'm trying to attach one image to the left side and the other image to the right side, and have the text center. Here's the sample code I'm dealing with:

XHTML:
Code: 
<div>

 <img alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />

 <p class="header">The Rendezvouscp Website</p>
 
 <img alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />
 
 </div>

CSS:
Code: 
/* Header */
.header {background: #bbb;
margin: 0;
width: 100%;
font-weight: normal;
text-align: center;
font-family: Lucida Grande, Verdana, Geneva, Arial, sans-serif;
font-size: 3.5em}

Here's the page: http://homepage.mac.com/rendezvouscp/cobalt/. Thanks in advance!
-Chase
 
kettle

kettle

macrumors 65816
May 12, 2002
1,319
59
England, Great Britain (Airstrip One)
CSS - add this.
Code: 
#titlebanner p

{
display: inline;
}

HTML - identify the tag in the HTML.
Code: 
<div id="titlebanner">

 <img alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />

 <p class="header">The Rendezvouscp Website</p>
 
 <img alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />
 
 </div>

Also, I'm not sure how good the center tag is anymore, it validates, but it's not really used anymore.
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Ok, I changed the code slightly so that the header tag is on the div, not on the p. I also changed the CSS to include .header p, and in that is the new display: inline tag. I updated the online version. It's almost what I want, but, I want the images to be in their far corners, not right next to the text. Anyway to do that? Thanks!
-Chase
 
HexMonkey

HexMonkey

Administrator emeritus
Feb 5, 2004
2,240
504
New Zealand
Add to the CSS file:
Code: 
.leftimage {float:left;}
.rightimage {float:right;}
Use these classes for the two images, and move the second img tag to before the p tag (this prevents problems with the second image having an incorrect vertical location in some browsers, eg Firefox), as follows:
Code: 
<div class="header">

 <img class="leftimage" alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />
 <img class="rightimage" alt="tree" border="0" height="50" src="elements/tree.gif" title="tree" width="50" />

 <p>The Rendezvouscp Website</p>

 </div>

This will position the images properly, but you may want to give them the darker background like the rest of the header. To do this, remove "display: inline" from the header class.

I tested this in Safari, Firefox, Opera 7.5 and Mac IE 5.2, and it generally worked as expected, although the text is off-centre in IE.
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Alright, I had cleaned up the CSS right after my last post, so I just added those two new classes to the CSS and then to the images, and then I moved the img tags before the p tag. Worked perfectly, thanks!

I don't see the error in IE 5.2.3 for Mac, but I'm (almost) sure there's something wrong in IE 6. Thanks guys!
-Chase
 
HexMonkey

HexMonkey

Administrator emeritus
Feb 5, 2004
2,240
504
New Zealand
Some other change you made must have fixed the Mac IE problem, it's working for me now. The probable IE 6 problem is unfortunate though, but hopefully there's a easy fix. Apart from that, it's good to know it works.
 
M

mcarvin

macrumors regular
Oct 26, 2003
218
2
Southern NJ
HexMonkey said:
Some other change you made must have fixed the Mac IE problem, it's working for me now. The probable IE 6 problem is unfortunate though, but hopefully there's a easy fix. Apart from that, it's good to know it works.
Click to expand...

I've started using Dean Edwards' IE7 extension instead of hacking up CSS. I have 2 sites in beta which both use it and there's no discernable performance hit, no extraneous CSS hacks, and no IE/Win problems. Really easy to use and implement - one line of code calling a javascript.
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Hello again. I thought that it'd be easier to just post in this current topic than start a whole new one. The help here is almost irresistible!

So, I have a few problems. I'll just list them all, however I'm not expecting help on all of them (your suggestions will just help me develop faster though).

Ok, number one: I have had a style switcher in previous builds of my website, but then I took it out since I rebuilt it from the ground up again. When I had it in though, it worked perfectly in the browsers I tested.

Now I've added it back in, and it works perfectly in IE 5, Firefox, and Camino (all for Mac). It switches to the style, and it remembers the preferred style in a cookie. However, this isn't the case in Safari. Safari refuses to remember the preferred style, and I can't find out why. I've deleted the cookie, reinstalled Safari, checked permissions, even re-wrote the JS from ALA (my first version was from ThinkSecret, but it turns out that they had almost the exact same JS code).

I have no clue why Safari refuses to recognize the preferred style, and maybe someone can tell me that it's because of Safari or that there's something wrong with my machine if it works in yours. Safari 1.2 (v125).

Ok, that's what I really need help on, but here are just some other things you guys might be able to help with.

Two: IE 5 for Mac and IE 6 refuse to recognize the max-width. I've read some hacks for IE 6 (they have never worked for me though for some reason) but none for IE 5 for Mac. Any suggestions?

Ok, I'll stop here (can't wait for the day that I get annoying around here). Thanks in advance!
-Chase
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Ok, I've established that it's my computer that seems to be refusing to save the cookie in Safari. But I have no clue why. I've deleted some extra cookies I have no use for and reinstalled Safari since I last posted. I have no clue what to do, so I guess I'll post in the Software Discussions forum now. However, if you have any tips on the above things, please help! :)
-Chase
 
HexMonkey

HexMonkey

Administrator emeritus
Feb 5, 2004
2,240
504
New Zealand
rendezvouscp said:
Ok, I've established that it's my computer that seems to be refusing to save the cookie in Safari. But I have no clue why. I've deleted some extra cookies I have no use for and reinstalled Safari since I last posted. I have no clue what to do, so I guess I'll post in the Software Discussions forum now. However, if you have any tips on the above things, please help! :)
-Chase
Click to expand...

I'm not entirely sure what the problem with the cookie could be, but try the following:
  • Make sure you don't have "Accept Cookies" set to "Never" in the Security pane of Safari's preferences
  • Delete Safari's preferences file (~/Library/Preferences/com.apple.Safari.plist)
  • Reset Safari (from Safari's application menu)
  • If none of the above work, create a test user to see if it works there. If it does, then there's probably a corrupt file somewhere in your user's Library which you should be able to find with trial and error

On the topic of your site, do you still have a copy of it online so that we can see the relevant code? The link in your original post now leads to an Apple error page.
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
The link will no longer work because I've figured out the problem. Apparently Safari doesn't like to receive cookies from files on your system, and will only take them if you access your own system. I was reading from file:/// etc. whereas I had to use Personal File Sharing in order for it to work. Weird, since every other browser isn't that way. My other questions still stand (IE 5 Mac max-width restriction, etc.) if anyone has dealt with these before. Thanks!
-Chase
 
R

rendezvouscp

macrumors 68000
Original poster
Aug 20, 2003
1,526
0
Long Beach, California
Hey, guess who's back again! Maybe someone can tell me when this gets annoying...

Ok, here's the problem. I want a drop shadow around the site I'm developing (link removed). However, I can't just make the background the drop shadow and give it a 50% centering (http://www.alistapart.com/articles/fauxcolumns/). See, I want the drop shadow to continue to wrap around the layout even when it expands (when the users expand the text size). I have been looking for about a week on how to do it, but I still have no clue. Can anyone help me with an article or the needed XHTML/CSS? It'd be greatly appreciated. Thanks in advance.

EDIT: I decided to just use a regular border, so no help needed. Thanks.
-Chase
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom