CSS

DIV problem

Sun, 22 Jun 2008 03:58:33 GMT

Hi folks: I got a challenge for you all.

On this page: http://www.ketnar.org/~shadwalk/new_site/s_rroom/index.html I want to put text and info right within the blue DIV box. Sort of what frames was, but now I use CSS and DIV. Now I got the box precisely positioned right. But for some reason all the text and stuff is on the bottom left, and nothing I've done has made it work on the top left like it normally does.

In case your wondering, this 3 column CSS was the only one that I could find that works in 99% of browsers (IE be dammed) so that explains why I use this particular type. But I'm at a loss on what to do elsewhere. Also what would happen if text was to be more than the box? Is there a way of making a scroll bar (again like old frames)

Your advice is appreciated.

- Shado

moving navigation - UPDATED

Fri, 13 Jun 2008 21:41:56 GMT

Hi, I'm new here and pretty new to css/html. I'm working on a website and have encountered what I'm sure is a menial problem but is certainly baffling to me.

My problems:

PROBLEM #1 I want to move the chunk of text/link block that says...:
About
Graphics
Resources
Blog

...down a touch. I've tried adjusting the padding in the class I created for that section, but nothing akin to that seems to work.

Changed the ul navigation block in the HTML to a div layer and adjusted the css to be:

PROBLEM #2 : Also, if you note how when the mouse is nowhere near the nav links, the navigation links change color as if they've been hovered-over anyway? How can it be changed so that the nav links only change color when the mouse is over the nav links?

The links fixed when the block was changed to a div layer.

PROBLEM #3: My happily organized & centered navigation links are not active nor do they respond as links upon mouse rollover in IE.

My current HTML:

My CSS:

body {
background-color: #5a5050;
background-image: url("http://img.photobucket.com/albums/v701/PictoKid/cssmockup.png");
background-repeat: no-repeat;
background-position: top center;
}

h1 {
font-family: ariel, verdana, sans-serif;
font-size: 30px;
padding: 300px 20px 20px 0px;
}

#side-navigation {
font-family: tahoma;
font-size: 10px;
padding-left: 460px;
margin-top: 200px;
margin-bottom: -200px;
}

li { 
list-style-type: none; 
}

a:link {
/* Applies to all unvisited links */
display: block;
text-transform: uppercase;
text-decoration: none;
font-weight: none;
background-color: transparent;
color: #ffffff;
}

a:visited {
/* Applies to all visited links */
display: block;
text-transform: uppercase;
text-decoration: none;
font-weight: none;
background-color: transparent;
color: #5a5050;
}

a:hover {
/* Applies to links under the pointer */
text-transform: uppercase;
text-decoration: none;
font-weight: none;
background-color: transparent;
color: #d6eb25;
}

a:active {
/* Applies to activated links */
text-transform: uppercase;
text-decoration: none;
font-weight: none;
background-color: transparent;
color: #ffffff;
}

I'm working in Firefox at the moment. Thanks in advance for any suggestions.

Unordered List--Vertical Spacing

Tue, 10 Jun 2008 17:16:21 GMT

RESOLVED

Thanks everybody for the help.
This resolved my issues:

    display: block;
    margin-top: 25px;

I don't really understand that "display:block"---but I'll look it up!

ORIGINAL QUESTION
I have an unordered list, which I want to convert to a Vertical menu.
Everything is working fine.

Except that I would like to add extra Vertical space between the links.

For example I want to go from this:
   LinkA
   LinkB
   LinkC

To something that looks like this:
   LinkA

   LinkB

   LinkC

Any thoughts on how I might do this?
I must not be using the right syntax in my search, because I'm not seeing anything that helps.

Appreciate any help! Thanks!

unbiased modern browser info for newbies

Wed, 09 Apr 2008 16:13:15 GMT

i'm attempting to use dean edwards ie7.js to simplify supporting IE6, but i want to offer a quick explanation as to why things look funny in the rare case of IE<7 with javascript disabled a la the old browser upgrade campaign. does anyone know of a page i could link to for reasonable and accessible info on modern browsers other than browse happy? i don't want to just link to get firefox because there are plenty of decent browsers out there and i'm not interested in foisting my browser of choice on others. the (relatively mild) anti-IE bias in browse happy may turn off some folks, so i'm looking for a more gentle alternative.

Time out: CSS comic strip

Wed, 09 Apr 2008 03:36:26 GMT

I thought this comic strip is brilliant.

Original place where this comic strip is from. Chickenstrip by Niwatori.

Suckerfish Woes in IE7

Fri, 28 Mar 2008 03:17:20 GMT

I'm working on a multi-level suckerfish menu for a client but I keep running into a snag in Internet Explorer 7. A working sample of the code may be viewed here but here is the issue:

Occasionally IE7 will show 2nd level menus when you hover over a main item; only it will not show any of the text; just a gray box.

Now I must admit pure-css suckerfish menus have never really been my thing. I've always used a rather outdated but easily inserted JavaScript / CSS combination, so a lot of my CSS for this has been managed by reading articles and modifying to fulfill my own needs.

The CSS code I am using can be viewed and I think should be fairly well documented. I assume the culprit is in the "Cursor & Hide/Show Statements" section at the bottom... any help that could be offered would be great, as IE7 is just bothering me to no end.

padding in % & float

Wed, 26 Mar 2008 12:58:59 GMT

compare opera 9.2x and IE7 with opera 9.5 and Safari 3.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <STYLE>
 * {padding: 0; margin: 0; float:left; border: 1px solid;}
 .t4 {padding: 0 5%;  width:auto;}
 .t5 {padding: 0 5%;  width:100px;}
 </STYLE>
<div class="t4">| auto</div>
<div class="t5">|100px</div>

who is right?
on my site

style of comments page

Tue, 25 Mar 2008 15:46:37 GMT

hey css experts!
I was wondering if I could customize the page of an actual entry (where you can see all the comments or post a comment on that one entry) so that there's a fixed font or width?
This is an entry of mine that is not customized:

Here's what I mean by changing the style:

And does that fact that I have S2 have anything to do with it? Because I could switch to S1 if it's necessary :S

hopefully, I'm not confusing everyone lol :D

Wed, 12 Mar 2008 14:14:58 GMT

My absolute position and z-index seem to not be working nicely with each other in Firefox, but works fine in IE.

Could anyone take a look and let me know what I'm doing wrong, please?

CSS ? for LJ layouts: fixed entry width?

Thu, 06 Mar 2008 18:38:35 GMT

I am very bad with HTML and would like to be able to use the customization area in S2 to adjust LiveJournal layouts while inputting CSS for changing specific things. What I want seems like it would be pretty simple, but I can't find any information on CSS codes to use. Here's what I want to do:

1. Is there a CSS code to input that will make my journal content a fixed width? The problem is that I want a header image of the same size to attach to the entries and the entries not change width when the screen is maximized/minimized. Does that make sense? I don't want to use just any layout :-\ I've looked into specific layouts and what you can change using CSS, but I can't find this question answered for any layout--much less the type of layout I want to use. I'd like it to be one with a sidebar like Digital Multiplex's.

2. Is there some way to get this stupid journal title box in Digital Multiplex to disappear using CSS?

If someone could please help me with this, I'd... probably cry from being so happy. I hope this stuff was acceptable to ask here and I'm sorry if it wasn't T.T

IE8

Thu, 06 Mar 2008 12:19:38 GMT

Remember The Second Acid Test? Last December, Web Standards Project reported that IE8 passed this test. A test that even FF2 haven't passed yet.

It's a good move from IE, though, the article also reminded us that passing doesn't mean that IE8 is free of CSS bug.

What's Second Acid Test?
http://www.webstandards.org/action/acid2/

And just about I'm going to post this, "the LJ entry area scrollbar" is shifted to the center. Not that it means anything for the CSS side, but it sure is a weird rendering behavior.

ETA: See the first commentator name in this Cindy Li's entry with IE8, and hover to his name. Voila. Or scroll up and down until his name is covered and then hover to his name again. Voila.

And you know what, I am editing this via Notepad, because the text pointer didn't want to move where I want to. Tsk.

Wed, 27 Feb 2008 00:12:14 GMT

Why is the subscribe link and image not being affect by the css I've put upon it on my Debian blog?

Thanks :)

nested boxes error

Fri, 01 Feb 2008 21:46:07 GMT

I can't figure this out, I validated the CSS and the html. I'm using dreamweaver, there's a js menu on the page, but this issue appears to be with the CSS nested boxes. I have the same appearance prob in ff and ie. I want to have the "content" box appear within the "page" box, but it runs over. I don't want to set a pixel height b/c different pages have different heights. Nothing I've tried is working.

page: http://www.synergyrad.com/home2.html
css: http://www.synergyrad.com/styles/main2.css

I've been looking all over, it seems like this must be something simple, but I need some help.

Thanks much!

Suckerfish won't stay open in IE

Wed, 23 Jan 2008 21:42:12 GMT

I tried to use the suckerfish dropdown menus for the first time, and they work fine in Firefox, but in IE they won't stay open when I hover over the parent menu item. The dropdown opens when I hover, but when I wanna navigate to one of the submenu items, the dropdown closes again. So I have no chance of actually clicking anything.
Anyone have any idea why this could be?

CSS part


	ul#nav {
	width: 970px;
	height: 24px;
	background: url('../img/navi/buehne_5_intra.gif') no-repeat top left; 
	margin: 0;
	padding: 0;
	list-style: none;
	}
		ul#nav li {
		list-style: none;
		float: left;
		position: relative;
		margin: 0;
		padding: 3px 25px 0 6px;
		height: 21px;
		font-weight: bold;
		background: url('../img/navi/div_intra.gif') no-repeat top right;
		font-size: 11px;
		}
		ul#nav li.last {
		background: none;
		}
		ul#nav li a, ul#nav li a:link, ul#nav li a:visited {
		color: #87a7ce;
		text-decoration: none;
		}
		ul#nav li a:hover, ul#nav li a:focus, ul#nav li a:active {
		color: #fff;
		}
		
		/* dropdown */
		li ul.dropdown {
		display: none;
		position: absolute; 
		list-style: none;
		top: 0;
		left: 0;
		margin: 0 0 0 0;
		padding: 24px 0 0 0;
		z-index: 5;
		width: 150px;
		}
			ul#nav li ul.dropdown li {
			list-style: none;
			float: none;
			padding: 5px 0 5px 10px;
			height: auto;
			position: relative;
			background: #3c64a4;
			border-bottom: 1px solid #acbcd4;
			display: block;
			}
			ul#nav li ul.dropdown li.last {
			border-bottom: none;
			}
			ul#nav li ul.dropdown li a, ul#nav li ul.dropdown li a:link, ul#nav li ul.dropdown li a:visited {
			display: block;
			color: #acbcd4;
			}
			ul#nav li ul.dropdown li a:hover, ul#nav li ul.dropdown li a:focus, ul#nav li ul.dropdown li a:active {
			color: #fff;
			}
			
		ul#nav li > ul.dropdown {
		top: 0;
		left: 0;
		}
		li:hover ul.dropdown, li.over ul.dropdown { 
		display: block; 
		}

HTML part (spaces are because LJ is stupid)


  < ul id="nav">
    < li>
      < a href="about.php">About</a>
      < ul class="dropdown">
        < li>< a href="">Punkt 1</a></li>
        < li>< a href="">Punkt 2</a></li>
        < li class="last">< a href="">Punkt 3</a></li>
      < /ul>
    < /li>
< /ul>

Tue, 22 Jan 2008 19:03:25 GMT

Is it possible to have text fill up #div_foo, like it does normally, and then have any excess flow over to #div_bar like in the above image? I could do this tediously server side, but I thought that this should be something for CSS to do.

Any better suggestions?

Thanks.

Need some help here!

Thu, 17 Jan 2008 17:09:09 GMT

Hi all...

I am new to CSS, and I want to apply a background and banner to my Lj but I dunno the codes that I should use to do it..

so, anyone can help me here??

Thanx alot..^^

aso0omy-chan!

Suckerfish Drop Downs

Wed, 02 Jan 2008 18:09:23 GMT

okay, I googled it. but honestly, I'm not a 'pro' - which is why I came here. I haven't actually hosted the site, because it was more or less a database for me just on my computer, but here, I'll put it up on geocities.

I'm interested in making just a single-level drop down
I don't know how invasive this is, but I am searching for help

Here's the site
Here's the site in which I found the suckerfish drop down coding

and here's my coding thus far.

I don't know if it's too much to ask, but I was wondering if any of you could possibly show me where to put the coding....

<html><head><title>; welcome to new haven</title>
<style type="text/css">

body 
{ background: #CBEFEA; 
background-image: url('background.gif'); 
background-repeat: repeat;
background-position: left;
[valueII: right, center, left, percentage, pixel number]
background-attachment: fixed;

font-family: Trebuchet MS; 
color: #F0EFDA; 
letter-spacing: 0pt; 
font-weight: normal; 
font-size: 8pt;

background-attachment:fixed;
scrollbar-arrow-color: #66CAEB;
scrollbar-track-color: #CBEFEA;
scrollbar-face-color: #CBEFEA;
scrollbar-highlight-color: #CBEFEA;
scrollbar-3dlight-color: #CBEFEA;
scrollbar-darkshadow-color: #CBEFEA;
scrollbar-shadow-color: #CBEFEA;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0; 
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0; 
}

td
{ font-family: Trebuchet MS; 
color: #F0EFDA;
font-size: 8pt;
padding-left: 0;
padding-right: 0;
padding-top: 0; 
padding-bottom: 0; 
padding:0; [2cm this is for all four sides] 
padding: 0 0; }

{ background-color: #CBEFEA;
  background-image: url('background.gif');
  background-repeat: repeat;
  color: #FFF;
  font-family: verdana;
  font-size: 8pt; 
  margin: 0px;
  padding: 0px;
}

a, a:link, a:visited
{ text-decoration: none; 
color:#E7F67F; 
letter-spacing: 0pt; 
}

a:hover
{ text-decoration: underline; 
color:#8C9A0F;
letter-spacing: 0pt; 
}

b {
color: #FFFFFF; }

i {
color: #FFFFFF; }

u {
color: #FFFFFF; }

#header {
  margin: 0px;
  padding: 0px;
  height: 330px;
}

#top {
  position: absolute;
  left: 5px;
  top: 282px;
  width: 690px;
  font-size: 10pt;
  font-weight: bold; 
  color: #FFFFFF;
  text-transform: lowercase;
}

#left {
  position: absolute;
  left: 6px;
  top: 332px;
  width: 160px;
  font-size: 8pt;
  color: #EAEEBF;
  font-weight: normal; 
}

#right {
  top: 335px;
  margin-left: 175px;
  width: 518px;
  font-size: 8pt;
  color: #EEEEEE;
  font-weight: normal; 
}

</style>
</head>

<body>

<body>

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>

</div>

<div id="right">
<table border="0" cellpadding="2" cellspacing="0" width="519">
<tr><td bgcolor="#CEE021"><font color="FFFFFF"><p align="center"><b>title</b></p></font></td></tr>
<tr><td> <p align="justify">
blah blah blah blah blah blah blah blah <b>blah blah blah blah</b> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <i>blah blah</i> blah blah blah blah <a href="">blah blah</a> blah blah blah blah <u>blah blah blah blah blah blah</u> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br><br>
</p></td>

<tr><td bgcolor="#CEE021"><font color="FFFFFF"><p align="center"><b>title</b></p></font></td></tr>
<tr><td> <p align="justify">
<br>
</p></td></tr>

<tr><td bgcolor="#CEE021"><font color="FFFFFF"><p align="center"><b>title</b></p></font></td></tr>
<tr><td> <p align="justify">
<br>
</p></td></tr></table>

</div>

</body>
</html>

right, basically it'd be nice to make the drop downs start where it says 'home' and then I wanted to make it on the two lines. I don't even know if this is possible

NAVIGATION; like eljay

Tue, 01 Jan 2008 20:59:14 GMT

I don't really know where to post this, but i was directed here, so I hope you can help me

So, in the 'original' viewing scheme of livejournal, remember the old one, before the set up all the new versions, i can't remember the name, but with the navigation on top, and then you hover over say "Journal" and then below on a horizontal line below the options Update, Recent, Archive, Friends etc appear and you then hover to them...Anyone following me so far...?

It's a sort of drop down menu (I don't actually know) but I was wondering if anyone here knew how to repeat that coding, for a site or something...?

I've no idea how clear that was, so any help with be appreciated.

Let's go with a picture example HERE, for those who have no idea what I'm talking about, they tend to help.

HAPPY NEW YEARS!

p.s. I'm not a whiz at css, nor html, so don't start spewing vocab I may not get...sorry!

css dropdown behind flash video

Sun, 30 Dec 2007 06:46:37 GMT

Hi All

I was wondering if someone can please help me. I created a css menu which works fine but when I put a video on the page the drop down goes behind it in IE7. When I had a picture where the video was it was fine.

View here

Heres the css
/* CSS Document */
A:link {
COLOR:#003366;
}

A:visited {
COLOR:#666666;
}

A:hover{
text-decoration:underline;
color:#000033;
}
#updates{
border-bottom:#000000 solid thin;
background:#FFFFFF url(sssfimages/tinybluesalmon1.jpg) no-repeat left;
color:#000000;
padding-bottom: 4px;
padding-top: 4px;
text-align:center;
font-weight:600;
font-size:18px;
margin: 0px;
}
#footer {
background:url(sssfimages/footerbox.gif) no-repeat;
}
#updatetext{
color:#000000;
padding:5px;
padding-top:0;
text-align:justify;
font-size:small;
font-family:Georgia, "Times New Roman", Times, serif
}
#updatetext2{
color:#003366;
padding:5px;
padding-top:0;
font-size:small;
font-family:"Courier New", Courier, mono;}

#boxes{
background:#4EA5D0;
border:solid #000000 thin;
width:177px;
}
#imgdesc{
padding:5px;
border:thin solid #176CD7;
float:right;
margin-top: 15px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

#imglogos{
padding:5px;
border:thin solid #FFFFFF;
background-color:#000033;
}

#rivers {
background-color: #4EA5D0;
border:#000000 thin solid;
}

#rivers td{
padding:5px;
}

#leftport {width:95%;
padding: 10px 0;
}

#leftport dl {
width: 95%;
float:left;
margin: 10px 20px;
padding: 0;
display:inline;
}

#leftport dt{
float: inherit;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color:#003366;
}
#leftport h3{
font-size: 130%;
text-decoration:underline;
letter-spacing: 1px;
color:#003333;
}
#leftport dd{
margin: 0;
padding: 0;
font-size:100%;
color:#003333;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}

#leftport dd.img img{
text-align:justify;
float: left;
margin: 0 8px 0 0;
padding: 4px;
border-right-color:#6633FF;
background:#CCCCCC;
}

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
vertical-align:middle;
float: left;
background-color: #000033; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
height:33px;
padding: 0 8px;
font-family:"Calligraph421 BT", Arial, "Times New Roman";
font-size:16px;
background:url(sssfimages/menubg.jpg) repeat-x;
border-left: 1px solid black;
text-decoration: none;
color: #000000;
vertical-align:middle;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{

left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: white;
border: 1px solid black;
text-decoration: none;
padding: 0 5px;

}

.suckertreemenu ul li a:hover{
background:url(sssfimages/menubgfish.jpg) repeat-x;
color: navy;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(sssfimages/menubgfish.jpg) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(sssfimages/menubgfish.jpg) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

thanks so much!

Hello )

Tue, 18 Dec 2007 21:41:09 GMT

Can anyone help me, please? Is there any way to change the names of the month in the calendar? For example, if I want December to be displayed as a "A month of stars". Is it even possible?

Height help / Nifty corners

Thu, 06 Dec 2007 10:42:47 GMT

I realise this will probably turn out to be something obvious, but I've been researching and trying things for ages and going in circles. Any help much appreciated.

I apologise for the abominably perky colour scheme, but I'm stuck with it. ;)

Looks reasonably similar in Firefox.

Mocked-up as it should be.

Validates as XHTML except for onMouseOver etc. CSS validates.

Page here.
CSS here.

Please save me from despair. All help appreciated.

Also: has anyone used NiftyCorners / NiftyCube to get rounded corners with CSS?

Navigation suckage in IE

Thu, 06 Dec 2007 02:31:17 GMT

My Site. Having navigation layout troubles in IE — it looks horrible. The HTML is a standard unordered list. The page validates XHTML. Help? CSS and screenshots after the cut.

The main problem is the navigation at the top of the page. It should look like this:

But in IE6 I get:

And in IE7:

My CSS:

/* Top Menu */
#topmenu {
background: #202020;
position: fixed;
top: 0em;
height: 30px;
width: 100%;
margin: 0px 0px 0px -8px;
border-bottom: 1px solid #990000;
}

#topmenu ul {
font: bold 1em/70px "Century Gothic", "Trebuchet MS", sans-serif;
letter-spacing: 2px;
list-style-type: none;
text-transform: uppercase;
width: 900px;
}
#topmenu ul li {
float: right;
margin: -30px 70px 0 0;
text-align: center;
}
#topmenu ul li a {
color: #CC0000;
height: 100%;
text-decoration: none;
}

#topmenu ul li a:hover {
border: 0;
color: #FF3333;
text-decoration: none;
}

#topmenu ul li a:active {
border: 0;
color: #FFFFCC;
text-decoration: none;
}

I'm guessing I need a hack for IE...any suggestions? The secondary problem is the way my name places. It's correct in the Firefox picture, closer to the middle. I defined that with a percentage margin, which it seems IE doesn't like. Thanks for any help!

CSS fix - filling up space when there is no content dynamically

Wed, 28 Nov 2007 22:12:27 GMT

Problem: Your layout has a div within the main content, let's say a sidebar. You would like this to be the same height as the main content, even though there is less content, however, you do not want to set a height to either the main content or the sidebar. Let's say you have a border separating the two, or a lovely off-set background image in your sidebar. There is a way!

Here's your markup:

Let's say you want your sidebar on the right and your main content on the right.
Here's your CSS.

I've found a few other uses for this method, as well, but this seems to be the most wide-spread. Feel free to comment with other uses!

This DOES also work with horizontal content. Just use left/right instead of top/bottom. You can also use all four to fill the space entirely.

For IE 6 -

In your ie6screen.css:

And check the site!

http://www.cherstewart.com

Compatibility Issues

Fri, 23 Nov 2007 16:12:48 GMT

Hello!

In March of this year, I tried my hands at making my Portal - www.toxic-stars.net - Firefox friendly. I promptly gave up on that project when nothing worked.

Since I've made the conversion from IE to Firefox, I decided that I really should make my Portal pretty on Firefox. I mean, I'm going to have to look at it on Firefox anyway. I don't want to open a new window just so I can bask in its loveliness on IE and only IE.

The problem is...well...it's aesthetic. The text BLEEDS onto my layout when you view my site on Firefox. Check out these cute screen-shots I made for you guys:

I've tried re-adjusting the frame, but it causes major problems in IE, and looks nice on Firefox. There is no happy medium. There just isn't. And I can't begin to understand why there's no happy medium, because my pixel art site looks brilliant on both browsers. There IS a way to make this all work. But it just WON'T.

My question is...how the crap can I fix this problem? If someone needs to check out my code, I'll be more than happy to post it under an LJ cut.

Thanks in advance!

Question about hover...

Wed, 14 Nov 2007 00:50:55 GMT

I'll try to explain my problem as good as I can:

- Go here. That's my site.
- Hover over any of the links in the main content (not the ones in the sidebar). You'll see that when you do so, the word becomes white, and the background of the word turns into that pink-ish color the word had originally.
- Click the link.
- Go back, refresh the page just in case.
- Hover again. If you get the problem I'm getting, the word will now be the same color than the background (all pink) when hovering.

It happens to all of the links after they've been clicked once.

Anyone happen to have an idea of what's going on?

body {
background: #B21617 url(http://i3.photobucket.com/albums/y86/Lauchis/tcg/bg3.jpg) repeat-y;
font-family: verdana;
font-size: 7pt;
color: #ffffff;
margin-left: 5px;
margin-right: 5px;
letter-spacing : 0;
line-height : 17px;
}

div#top {
width: 600px;
height: 250px;
position:absolute;
top: 0px;
left: 170px;
}

div#sidebar {
width: 15%;
min-height: 100%;
position: absolute;
top: 270px;
left: 0px;
background-color: #000000;
padding-left: 7px;
padding-top: 7px;
padding-right: 7px;
letter-spacing : 0;
line-height : 17px;
font-size: 7pt;
color: #ffffff;
font-family: verdana;
}

div#nav {
background-color: #000000;
color: #ffffff;
}

div#nav:hover {
background-color: #cc9696;
color: #ffffff;
}

div#content {
background-color: #711111;
width: 573px;
position:absolute;
top: 270px;
left: 170px;
font-family: verdana;
color: #ffffff;
font-size: 7pt;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
padding-top: 7px;
margin-left: 5px;
margin-right: 5px;
letter-spacing : 0;
line-height : 17px;

}

table, tr, td {
font-family: verdana;
font-size: 7pt;
color: #ffffff;
padding: 5px;
text-align: left;
}

h2, h3 {
font-family: arial;
color: #ffffff;
letter-spacing: 3px;
text-align: right;
margin-left: 5px;
margin-right: 5px;
font-weight: bold;
}

h4 {
font-family: georgia;
color: #000000;
letter-spacing: 2px;
margin-left: 5px;
margin-right: 5px;
font-size: 11pt;
font-weight: normal;
}

p {
font-family: verdana;
font-size: 7pt;
color: #ffffff;
margin-left: 5px;
margin-top: -9px;
margin-right: 5px;
letter-spacing : 0;
line-height : 17px;
}

i {
color: #cc9696;
}

b {
color: #cc9696;
}

a:link {
text-decoration: none;
color: #cc9696;
font-weight: bold;
}

a:hover {
background-color: #cc9696;
color: #ffffff;
cursor: crosshair;
font-weight: bold;
}

a:visited {
text-decoration: none;
color: #cc9696;
font-weight: bold;
}

a:active {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-style: italic;
}

input.button {
	clear: both;
	float: none;
	display: block;
	margin-left:0px;
	width: auto;
	cursor: crosshair;
        background: #ffffff;
        border-width: 1px;
        border-style: dotted;
        border-color: #000000;
}

Thanks a lot!

EDIT: Okay, wait... After months of not understangint it, I just got what the problem is: the link is the same color prior and post visit, because I don't want my links to change color. BUT the background color when hovering is always the same, because that can't be changed. My question now is is there a way to make the text be white when hovering even after it's been visited, if the after visited color is different?

I'm terribly sorry for the mess.