CSS - Creating Out-of-this-world Text

I'm not finding a topic which addresses this .. or at least one that I comprehend. I've just begun working with CSS, converting our website from one riddled with tables and frames. The new main page has a set of images at top (which finally don't have borders around them in any testing browser), and a set of dropdowns - which all browsers can see except AOL's. Our AOL user reports he is on 9.0 Optimized.

(how kosher is it here to post the contents of an entire set of files..?)

Pertinent Components:
- CSS: http://www.legendsofkarinth.com/lok_cssindex.css
- HTML: http://www.legendsofkarinth.com/smallership7a.html

Problem Summary:
- all browsers are seeing the rollover buttons performing properly but only after backing down from DOCTYPE STRICT to TRANSITIONAL and reinstalling BORDER="0" on all images with links;
- all but AOL see the four dropdowns parading across the bottom (again, no links).

As an aside, we had to back down from DOCTYPE STRICT to TRANSITIONAL in order for the images to line up in any browser.. I could use some advice there as well. Other than that, the page validates in STRICT but the images have a black line through the midpoint horizontal.

Struggling to get my <ul> to display itself on the left side of my sidebar navigation. I just want it over maybe 40 pixels to the left. I'm not sure why the ul is aligning itself in the center.

I tried floating the elements left, but the ul is stuck centered. I tried adjust margins/padding but all that does is truncate the text to another line. I set absolute position and got the list to move all the way to the left, but it broke the flow of the page and the list ran over top of the headers. Any thoughts?

All the CSS structures are imbedded in the STYLE section of the index file.
http://www.mgan.net/work/10-20-04/

Bonus question: Anyone know why in internet explorer when you run the mouse of my top navi-bar the footer graphic for the news section disappears?

I can't connect to W3C CSS and HTML tutorials. Does anyone else have the same problem?
http://www.w3schools.com/css/default.asp

Whats wrong? Did the Iceland Volcano ash break down the site?

Does any one have another good resource that is as concise as WC3?

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

hye peeps i need to create a external css for my website

www. losttv . 50webs. com

would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books?

any advise would be SO welcome

ricki

I want to have all my hyperlinks in my CSS file, so I can call them all at once. Is there any way to do this? Or do I have to code them into every page individually??

is it possible to create this in css ?



if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?)

ty

btw, just the style not the stuff inside them lol

Hello, I am trying to aling two unordered lists side by side by each other. I want them to look like:

Code:

Example 1:        Example2:
*blah               *blah
*blah               *blah
*blah               *blah

I'm running into two problems:

1) I can't get them spaced apart from each other. I tried putting them in a table, but the cells just sit right next to each other so there's no space.
2) Since it is an UL, the dotted bullet points are centered, however, I would like them left-justified like the example.

Is this possible?

Thanks guys,

[EDIT] After posting, the example does not display like I want it. I want a whole SPACE GAP between the two lists. The post made them run together.

One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he
_____________
|************|____________________
|*********************************|
|*********************************|
|*********************************|
|*********************************|
|*********************************|
-------------------------------------------------

Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page.

The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath.

CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below.

So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks!

Hello, I'm trying to create about 4 columns to hold different things in an organized manner with css. My site is www.rafm.org and if you go to the paste section, and look at the recent pastes, I want them to be in columns with column headers.

So, how do you create columns with css?

I'm trying to create a full width bar across the page. My current attempt is at:
http://www.mixicon.com/dev/test.html

It is currently working in Safari, but not in Firefox.I'm open to opinions in what I might be missing here, any thoughts? I'm mostly happy with how it looks in Safari, so I need any help to get it there in other browsers.

The attached image shows what it should look like.

Hi there.

I am trying to create the attached image in style sheets. I have done everything, but now I'm stuck on the border of the bottom TD.

Anyone got any suggestions on how to do this?

I know this should be possible - I'm not a CSS noob, nor a grand master

I'm trying to create an internal webapp that only needs to work with current modern browsers - so I'm not constrained by all the IE hack stuff.

It uses jquery-ui in places

I can get a version that nearly works in Safari, and one that nearly works in FF - but not one that works in both. And all attempts still have minor glitches.

(sorry - forum wouldn't let me post live links - you will have to copy and paste)

The target would be this:

ptone.com/temp/wrad/target.png

With the layout being fluid both vertically and horizontally - status bar always visible on the bottom - overflow content in the tab divs would be scrolled (see transcript tab in examples below)

Neither of these are perfect, but here is the one that works in Safari:

ptone.com/temp/wrad/test-layout.html

and here is the version that almost works in FF

ptone.com/temp/wrad/test-table.html

Neither works in the other browser

I've looked at lots of stuff about two column fluid vertical - but they almost all involve just one of the columns being fluid and one being set to content height. I want everything to be fluid (with a min h/w) except for the tabbed content

Absolute positioning seems to be the way to go here - but I'm struggling getting the jquery-ui tabs not to collapse in one browser or another.

Any help appreciated.

-Preston

Hi,

I have been using the HR tag to create a single line. The problem is that (in IE6 and 7) this creates an extra line break underneath the horizontal rule.

Firefox doesn't create an extra line break.

I tried to do this another way so I created a DIV with the class name .hr with the following properties:

Code:

div.hr {
  width:500px;  (being the width of the content area) 
  color:red;
  border-top:1px solid #CCCCCC;
  margin:0;
  padding:0;
  clear:both;
  }

However this still creates a line-break. Is there a way of creating a single horizontal line without incurring the extra line break in IE?

Many Thanks.