Archive for the ‘CSS’ Category

« Older Entries

Suckerfish Dropdown navigation going behind content

Saturday, May 3rd, 2008

Awhile back, I had a project where I created a nice clean (X)HTML page including navigation using UL and LI tags. A few months later the client decided they wanted to add a dropdown menu to the navigation. No problem, I thought. We just add the embedded lists to the navigation - style it with CSS - and use the Suckerfish dropdown menu technique. Easy Peasy.

Except when I implemented it, the drop down menus were showing up BEHIND the rest of the content instead of “above/over it”.

There was a lot of other things going on in the page, I have a simple example that demonstrates the issue.

I’m sure it makes sense somehow, if I had a better grasp of what “position: relative” does to the document - beyond that “position: relative” allows items INSIDE a relatively positioned block to be absolutely positioned WITHIN it (which is why I had done that). The side effect though is that it does that crazy thing with the menu.

Oh the HOURS and HOURS to figure that out…. /sigh.

Here is the same page - with just that one line (position: relative) removed.

I’ve now seen this problem crop up a few times. In one case, I was working with a design that I had not originally created and even though there were no “position: relative” in any of the css files - the only way to get the menu to be ABOVE the content was to explicitly declare “position: static” inside the div tag itself. (Even just declaring it in the css wouldn’t fix it - somewhere else it must have still been getting overridden)

While I’m at the point where I can’t even imagine designing a page using a table based layout anymore, I still get hit with some CSS sticking points that I just don’t get. So if you have more insight on this feel free to elaborate in the comments. I’m just so glad I was able to get the menu working!

Posted in CSS, Javascript | 5 Comments »

CSS “TOC” style?

Thursday, March 8th, 2007

I’m just curious… is there a fancy way to do something like this in CSS:

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the “Page” text lines up and the “…..” just fills in until it reaches the “Page” text… kind of like you’d see in a table of contents in a book? (Ideally the “….” wouldn’t even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!) :D

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won’t show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here’s the example.

Posted in CSS, CSS related, Call for help | 5 Comments »

Firefox underlining images

Wednesday, February 21st, 2007

Someone help me out before I go crazy.
Why is firefox underlining the image in this example?
Here is a screenshot (in case you’re not using firefox) - the above link looks like this in firefox:
weird underline in firefox

The code on that page is simply:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a img {
text-decoration: none;
border: none;
}
-->
</style>
</head>
<body>
<a href="#"><img src="gecko.gif" alt="gecko" /> Test</a><br />
<a href="#"><img src="gecko.gif" alt="gecko" /></a> <a href="#">Test</a>
</body>
</html>

I thought it might be a doctype issue - but changing it doesn’t seem to make a difference.

Added after: Just to make this even more mysterious… This DOES NOT create that line:
<a href="#"><img src="gecko.gif" alt="gecko" /> </a>
It doesn’t show up until we add a *character* within the <a> tag that the underline pops up…(I’ve updated the example to show this…)

Updated 3/30/07 Shaun wins the prize for finding the solution!:a img {
display:block;
border: none;
float: left;
}

The example has been updated…

Posted in CSS, Call for help | 8 Comments »

Extra space (padding) with List Items in IE

Friday, February 16th, 2007

For the past couple of days, I’ve been trying to figure out why a design I had been working on was showing extra padding (veritcally) in IE. I think I’d seen every solution such as: write the code like this:

<li>Item one</li><li>
Item two</li>

or make set them to float: left | right (which messed up the way the list was showing up…

The only thing that worked for me - was setting the line-height to the be the same size as the font-size used for the list. ie:

li {
font-size: 12px;
line-height: 12px;
}

And then you can add your own specific padding or margins as needed… Hope that saves someone the headache I just went through!!

Posted in CSS | 3 Comments »

floated box with extra (unintented) margin

Monday, January 22nd, 2007

Boy, do I love that “Position is everything” site. Every problem I’ve been having these days with CSS, the fix can be found there.

Here’s today’s CSS dilema. Had a simple floated div. Gave it a margin - and for some reason, IE doubled it. The solution is just to add “display: inline;” to the floated div, and all is well.

Posted in Bookmarks, CSS, CSS related | 1 Comment »

Floated boxes extending outside of container box

Saturday, January 20th, 2007

Ran into this problem today: Had a container div with floated divs inside. However the container div was shrinking up above the bottom of the floated divs inside.

See example here.

Found this solution which basically suggested adding the following so that it wouldn’t do that:

.containerdiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

As well as adding a height: 1% (to to the container div)

See fixed example here.

Posted in Bookmarks, CSS, CSS related | No Comments »

Vertical Center Text in DIV

Tuesday, January 9th, 2007

Like I said, I’m still fighting my way through understanding CSS. Here’s a little tid-bit I finally understand today. Had a bit of text that I wanted to have centered in a nav bar. “vertical-align: middle;” didn’t seem to do anything. Found this article which said this:

the thing with vertical-align is that it’s vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…

Posted in Bookmarks, CSS, CSS related | 1 Comment »

1px Background Image Shift

Monday, January 8th, 2007

I’m still fighting my way to understand CSS - so if there’s a better way to do this, feel free to let me know.

I wanted a black center column, that I would put content boxes with a white background over it. So I created my background with the centered black column, used CSS to center it and repeat the background vertically. Then I created my content box, centered that using “margin: 0 auto;”. As per usual, looks great in Firefox, but IE has the box shifted over to the left by 1px.

See example here.

Poked around online. First I found this article which was talking about a different kind of shifting. They wanted you to add “html { min-height: 100%; margin-bottom: 1px; }” to your styles so that the page doesn’t shift suddenly when scrollbars appear on one page and not the other. (what they have you add forces scrollbars to show on every page)

Then I found this article which explains what’s happening. Because I’m centering the background via one method, and the content via another - this is the reason why it’s different. They suggest using a wrapper div to center the background - thus centering everything via the same method. The only problem with this is that I wanted that black column to extend the full height of the browser window. (below the content). Just doing “height: 100%” didn’t seem to work.

So I happened to have still put the code in for the scrollbar thing, and just for kicks added a 1px margin to the left side… and strangely it works. (At least on IE and Firefox on the PC. I don’t have access to a mac anymore, so no idea what happens there).

See revised example here.

I’m happy I got it to work.. but I’m not sure why it does.

Posted in CSS | 2 Comments »

too much flexibility can even move a city

Tuesday, October 12th, 2004

Breaking the typical format here - as I don’t usually write commentary, but I couldn’t resist.

I’m learning more and more about CSS each day - but I still have some issues/conflicts with it - beyond my frustrations in learning it. I know there is a big push to make flexible layouts, but I have serious issues with the idea that “everything should be flexible”. An example of my issues… I was browsing some of the sites featured on CSS Beauty, their most recent link was to Cornell University.

Just a side note: I might be in the minority here, but still… I have a very large monitor, and very RARELY have my browser maximised. I tend to have several windows, tabs, etc. open all at once, and therefore sometimes scrunch windows down much smaller then they were ever intended to be. Usually it’s because I only want to focus on a particular portion of a page, so I scrunch the window (and if neccessary, scroll it) so I JUST see the portion I need. (leaving more room on the screen for other windows.) In so doing, I have noticed several sites, in their effort to be “flexible,” simply fall to pieces when I do this.

In the case of Cornell University - when I did this - the names of the cities actually moved. LOL!!! While I’m very impressed with their ability to put list items, carefully positioned over a map, when you scrunch the page - the cities move around. Suddenly “Doha” is a place in mexico! Who knew. ;-) This site is so flexible - I can even move a city. This is a good thing?

Posted in CSS | 6 Comments »

Border tricks and centering issues

Saturday, October 9th, 2004

I’m working on redesigning a site in CSS that I did many eons ago using tables for Christine. While I’m getting the hang of CSS, I still have a long ways to go.

First of all - Christine wants a border around her photos: first a thick white one, then a one pixel black one. She had previously been doing that with photoshop, but I’ve suggested to her that it would be better to just do it in CSS… On my first try, I had tried wrapping the img tag in a number of divs - which not only didn’t really work quite right, it added extra html that didn’t need to be there. The answer was simple. Here is the CSS I used for the border (a class I add to the img tag) :

padding: 15px;
border: 1px solid #000;
background-color: #fff;

The other thing I was struggling with was another (should have been) simple issue. I simply wanted a block of text, 600px wide - centered on the page, but with the text flush left. The key I was missing was adding margin-right:auto; and margin-left:auto;. So here’s the CSS for the outer div - and the div for the text block:

#content {
text-align: center;
}
#text{
width: 600px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

The only way I was able to figure that out was from looking at the examples on Max Design: CSS Page Layouts

Posted in CSS, Lessons learned | 5 Comments »

« Older Entries