Jump to content

Encountering problems while trying to avoid the font tag


Empy3
 Share

Recommended Posts

Hiya, I'm new to these forums, so I'll toss a couple quick things out that might help:1. I'm self-taught as far as HTML goes. A couple months ago I was asked to create a website for my MMO guild (yes, I am a gamer ;x) and thought that it would be a good idea to create it in XHTML so that I learned how to do it right. Therefore, it's entirely possible that I missed something obvious, so if this ends up just being a stupid question, I apologize.2. I've looked for answers several other places, and I'm sure this is adressed somewhere several threads on these forums, but I couldn't find anything that fixed my specific problem.3. Opera is my main browser and I run on a 1024x768 screen size, but the page should display more or less correctly on any screen setting that is at least 1024x768. How the page loads in Opera is ideally what I'd like it to look like in any browser.4. The page is hosted on Angelfire at the moment, and for this I apologize profusely. I'm having trouble finding a web host that doesn't charge rediculous $ for the traffic my guild generally incurs, or require me to spend 200 hours a month making insightful posts on their forums. I work 2 jobs and run my fiancee's guild so that he has the time/$ to focus on school, consequently I'm short on both. (Btw, if anyone knows of some reasonable web host, input on that would also be <3'd. My google searches haven't turned up much helpful.)Basically, I'm having trouble finding a way to change text colors without using the font tag. My page is using transitional XHTML, so I know that I -can-, but I'd rather learn the right way to do it it without the font tags. I can't use the paragraph tag, because I need the text to change color without starting a new paragraph every time, and I also don't want to turn the affected text into headings. Additionally, the color change works in Opera and apparently Firefox, but not IE. Any help/input onto fixing this in IE would be greatly appreciated.>>Problematic Page<<Displays like this in Opera:Opera_DKP.jpgDisplays like this in IE:IE_DKP.jpgExternal Style Sheet:

body{background: #000000 url('/anime4/silver_angel/Onyx/Nightbane_Sidebar.jpg') no-repeat fixed center right;color: #a5a9ba;margin: 5%;font-family: sans-serif;font-size: small }p.green{color: #32cd32}.paladin{text-align: left;color: #da7093;font-weight: bold;}.warrior{text-align: left;color: #cd853f;font-weight: bold;}.hunter{text-align: left;color: #32cd32;font-weight: bold;}.shaman{text-align: left;color: #454aff;font-weight: bold;}.rogue{text-align: left;color: #ffd700;font-weight: bold;}.druid{text-align: left;color: #ffa500;font-weight: bold;}.priest{text-align: left;color: #fffafa;font-weight: bold;}.mage{text-align: left;color: #00bfff;font-weight: bold;}.warlock{text-align: left;color: #8b008b;font-weight: bold;}

Actual HTML (Shortened to a few examples since the whole page is basically repetitions of the same thing):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Onyx DKP (l 0 0 t   p 0 i n t z)</title><link rel="stylesheet" type="text/css"href="/anime4/silver_angel/Onyx/DKP.css" /></head><table width="50%"><tr><td><text class="priest">Anabella</text>/<text class="warlock">Moranna</text></td><td align="right">43</td><td align="left">[25]</td></tr><tr><td><text class="rogue">Armadyl</text>/<text class="hunter">Kirsdarke</text></td><td align="right">110</td><td align="left">[90]</td></tr><tr><td><text class="rogue">Emerik</text>/<text class="hunter">Monoch</text></td><td align="right">47</td><td align="left">[47]</td></tr><tr><td><b>*</b><text class="warrior">Kiaiokalewa</text>/<text class="druid">Tem</text></td><td align="right">48</td><td align="left">[292]</td></tr><tr><td><text class="warrior">Shded</text>/<text class="paladin">Deathknights</text></td><td align="right">71</td><td align="left">[5]</td></tr><tr><td><text class="hunter">Zindak</text></td><td align="right">92</td><td align="left">[20]</td></tr><tr><td colspan="3" align="left"><p class="green">Last updated: 9-15-07 (Grull 9-9, Kara 9-10[K], Kara 9-10[M], Kara 9-14[K], Kara 9-14[M]) 9-9-07 (Kara 8-31[K], Gruul 9-1, Kazzak 9-1, Kara 9-1, SSC 9-2, Kara 9-6, Kara 9-7, SSC 9-8) 9-1-07 (Grull 8-25, Viscidous 8-26, Kara 8-27[K], Kara 8-27[M], Kara 8-30, Kara 8-31[M]) 8-25-07 (Kara 8-10, Kara 8-13, Kara 8-15, Kara 8-16, Kara 8-18, Gruul 8-18, SSC 8-19, Kara 8-20, Kara 8-25[K], Kara 8-25[M]) 8-18-07 (Grull 8-11, Gruul 8-12) 8-11-07 (Mag 8-5, Kara 8-6, Kara 8-8) 8-5-07 (Gruul 8-4) 8-4-07 (Gruul 7-28, Kara 7-29, Kara 7-30, Kara 8-1, Kara 8-2, Kara 8-3) 7-28-07 (Gruul 7-21, Kara 7-22, Kara 7-23, Kara 7-25, Kara 7-27) 7-22-07 (Kara 7-15, Kara 7-16, Kara 7-19, Kara 7-20) 7-15-07 (Kara 7-13, Gruul 7-14) 7-12-07 (Kara 7-11) 7-10-07 (Kara 6-23, Gruul 6-30, Kara 7-1, Kara 7-2, Kara 7-4, Kara 7-6, Gruul 7-7, Kara 7-8, Kara 7-9) *2 Missing raid logs from 6-22 and 6-25*. 6-22-07 (Kara 5-26, Kara 5-28, Kara 6-2, Kara 6-4, Kara 6-8, Kara 6-9, Kara 6-11, Kara 6-15, Kara 6-16, Kara 6-18)</p></td></tr></table></body></html>

Any help that could be offered as to why the colors work the way I want them to in Opera and not in IE would be greatly appreciated. Also, is the difference in text sizes something that is innate to the different browsers, or also a problem with the way IE reads the code? Again, I apologize profusely for fact that the page is hosted on Angelfire. :)Edit: I fixed the inconsistent font size by using a 12px instead of small.

Link to comment
Share on other sites

you should use the span tag. it is simply a container that displays inline by default (i.e. it dosent seperate content onto a new lines like say a paragraph or a div which has by default the following style display:block)example (x)html:<p> john went to the <span ="red">shop</span> to buy <span class="blue">clothes.</span> </p> css:.red {color: red;}.blue {color: blue;}

Link to comment
Share on other sites

you should use the span tag. it is simply a container that displays inline by default (i.e. it dosent seperate content onto a new lines like say a paragraph or a div which has by default the following style display:block)example (x)html:<p> john went to the <span ="red">shop</span> to buy <span class="blue">clothes.</span> </p> css:.red {color: red;}.blue {color: blue;}
Oh, thank you so much. ^^ That completely fixed it. I wonder how I've never run across the span tags before. O_o
Link to comment
Share on other sites

And I have never seen <text></text> tags before???
She most likely confused them with <font>. Since the tag doesn't exist, that's why IE didn't recognize it, where as Opera accepted it sense it's a bit more flexible.Also, for webhosts, a few I know of:http://www.zone.net (My current VPS host, average prices, great support and reliability)http://host.gotcanyons.net/ (Somewhat cheap, reliable)http://www.dedicatedbox.net (Dedicated server boxes as low as $55; nothing but great reviews from this guy, I'll be ordering a box in the next month or so)http://montecarlohosting.net/ (Same is said as above, though he can be a bit pricey; but as all his users have said, the connection they've made with him/his staff, the quality of support and reliability pays off the difference).http://www.charlottezweb.com/ (Cheap, reliable, probably a bit closer in your price-range; same goes for GotCanyons).Hope this helped :)
Link to comment
Share on other sites

Empy3 has since modified the page on the site, I can't find those tags anywhere on the updated site page. The reason it may have not presented a problem is that some weird quirks mode went into activation? I tried to replicate this effect yet no availing was underwent; I don't know how your page was even working with the first code provided. But those screenshots seem to prove the otherwise. Strange...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...