cant level off text in both firefox and IE [Archive]

dulede

05-29-2008, 06:18 PM

Hi

I have adopted a page that was designed by someone else and need to amend it to have months and accompanying text alongside one another. Can get it perfect in IE6 but even though they appear to be next to one another in dreamweaver they go all over the place in firefox and safari.

How can I put this right...preferably without spending days on something which should be pretty easy.

I have used divs but am getting up to speed with CSS. Don't know the ins and outs yet but willing to work on this.

Heres the URL I am dealing with. All other pages on site will be worked on at a later more stress free time but this one is urgent.

http://www.nrgcafebar.com/whats%20on.htm

I'm using dreamweaver mx2004 but hopefully move soon to hand coding instead.

Any and all help appreciated.
thanks, dulede

Medyman

05-29-2008, 07:35 PM

I'm using dreamweaver mx2004 but hopefully move soon to hand coding instead.
Good idea. Dreamweaver can't be leveraged properly until you're 100% comfortable with the code it's outputting. That way, you can spot all the errors that DW makes and fix for them. People assume that just because the program is doing the coding, it's error-proof, when that's not the case in the least.

To your problem...
You're using a whole ton of absolute positioning and pointless CSS there. There is never a situation to absolutely position everything. With CSS padding, margins and floats you can replicate most of what you can with absolute positioning. You only need to use it for the occasional element here and there, not the total layout.

I know most of that is DW's doing, but you should be aware nonetheless.

In your situation, I'd use a definition list. It's not a very popular HTML tag, but in effort to use proper, semantic, standards compliant code, you should be using it in this instance.

In a definition list, there are three tags of importance: <dl> (http://www.w3schools.com/tags/tag_dl.asp), <dt> (http://www.w3schools.com/tags/tag_dt.asp), and <dd> (http://www.w3schools.com/tags/tag_dd.asp). There are others but those are the three I've used below.

I would organize the markup as such:

<dl>
<dt>May</dt>
<dd><strong>Friday 30th May</strong> -'The Amigos' join us over dinner. Tickets £5.00 for entertainment only. </dd>
</dl>
<dl>
<dt>September</dt>
<dd><strong>Friday 13th June</strong> - Kirsty Roberts joins us over dinner for a night of chilled out jazz</dd>
<dd><strong>Saturday 28th June</strong> -'Calypso' make their debut appearance at NRG</dd>
</dl>

That should be self-explanatory. Let me know if you don't understand any of it.

Next, add your CSS:

<style type="text/css">
dt {
width:120px;
height:100%;
margin:0;
float:left;
text-transform:uppercase;
}
dd {
margin-left:120px;
}
</style>

All put together:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>What's On</title>
<style type="text/css">
dt {
width:120px;
height:100%;
margin:0;
float:left;
text-transform:uppercase;
}
dd {
margin-left:120px;
}
</style>
</head>
<body>

<dl>
<dt>May</dt>
<dd><strong>Friday 30th May</strong> -'The Amigos' join us over dinner. Tickets £5.00 for entertainment only. </dd>
</dl>
<dl>
<dt>September</dt>
<dd><strong>Friday 13th June</strong> - Kirsty Roberts joins us over dinner for a night of chilled out jazz</dd>
<dd><strong>Saturday 28th June</strong> -'Calypso' make their debut appearance at NRG</dd>
</dl>

</body>
</html>

Tested in IE6, IE7, Fx, Opera, Safari. All on PC.

dulede

05-30-2008, 12:56 AM

I shall try this tomorrow. many thanks. There are some issues which I hope it will allow me to address but not sure before I get down and dirty with it that it will do so adequately.

The problem started when I had to go into page and fix spacing in nav bar which opened up each time a text grouping from centre would be deeper than the nav button. Eg 4 lines of text would be fine but 6 would force spacing in nav bar.

With my limited knowledge of html and css fixed this using ' dw layers' which i now know are simply divs. I haven't built many sites for a long time and getting back into things is pretty twitchy for me at moment. Learning via baby steps it appears.

Then had to adjust the black Bold May June July etc headings - that are in their own 'layers'. Photoshop and Flash use make it far easier for me to grasp these as layers still rather than divs. Now the top of the bold month, eg MAY JUNE should line up with the top of the respective red bold May 30th, June 13th, June 20th etc and thus needs to have same level in the page, padding, whatever you may call it as each other.

Not sure if I would have to give each of the definitions a representative name such as dtmay or dljune or ddjuly in order to allow this to work in a list format while appearing as I need it to shown on link below.

http://www.nrgcafebar.com/problems1.htm

I have to say had never seen definition tags before and this is due to number of years of pure flash work with little inclusion of html. SEO has pushed me back in right direction now though.

I don't mind working on this as its likely to come up time and again unless i solve it now but I want to ensure defintion tags will do the trick as there will be a number of these both alongside and above each other as shown in pix.

many thanks
dulede

Medyman

05-30-2008, 02:38 AM

Well definition tags are fairly under-utilized in general. You can replicate their styling using a number of other HTML tags, but I don't see the point in adding more styling to other elements to replicate <dl>'s when you can use <dl>s.

I understand the logic behind thinking of everything as a layer. I come from a Flash-centric background as well. But that's really a trouble-maker when moving into HTML. You could, as you are doing, position everything with the layer mentality -- one thing over another. However, this gets really hectic down the line, not to mention horribly messy if you're hand coding. This is one of the reasons I don't recommend using a WYSIWYG editor (such as DW), especially when just starting out with HTML/CSS.

The definition list will indeed do what you want. You could also use unordered lists to do the effect. You could use nested divs to this. You could even use a table. As I said, there are many ways to replicate the design, but <dl>s are probably the cleanest.

About the page you linked to...you'll see when you try the technique I showed that the results are just like the IE6 example, in all browsers. In fact, you can see it here (http://www.visualbinary.net/files/tutorials/definition-list/) (I just uploaded what I posted above to my server). You'll need to apply your colors, etc... of course but the structure is there.

You don't need to add anything to the markup that I provided above (no ids etc..) to work, unless you're using them for styling purposes (in which case, classes might be better). Just copy the same pattern for the rest of the months.

dulede

05-30-2008, 03:17 AM

Medyman

It looks spot on. Just superb. Will save me no end of trouble. Will work on this tomorrow now.

I have always been more into flash but now moving back toward using html or html flash hybrid pages. Neither is perfect for everything but each can complement each other. I just know that html is totally necessary for ranking etc so have to re-learn what I'd forgotten and a whole lot more. Dreamweaver and other wysiwyg editors are never true wysiwyg and trouble is normally the result of not knowing how to drill down and adjust the code. I will be working on this.

If you know of a good hand coding program, especially with color separation for types of content I would appreciate if you could let me know. Until then I will use script mode on dreamweaver. I do like its preview mode but ultimately its no different than save and view of any html file.

Your advice and help is really appreciated. You've been great.
regards, dulede

Medyman

05-30-2008, 03:52 AM

Medyman

It looks spot on. Just superb. Will save me no end of trouble. Will work on this tomorrow now.

I have always been more into flash but now moving back toward using html or html flash hybrid pages. Neither is perfect for everything but each can complement each other. I just know that html is totally necessary for ranking etc so have to re-learn what I'd forgotten and a whole lot more. Dreamweaver and other wysiwyg editors are never true wysiwyg and trouble is normally the result of not knowing how to drill down and adjust the code. I will be working on this.

If you know of a good hand coding program, especially with color separation for types of content I would appreciate if you could let me know. Until then I will use script mode on dreamweaver. I do like its preview mode but ultimately its no different than save and view of any html file.

Your advice and help is really appreciated. You've been great.
regards, dulede

What OS are you on? Windows? Mac?

For Windows, I use and highly recommend Notepad++. It's free and has most of the features of a full featured source editor and I love it. It doesn't have the preview bit but I don't really find hitting Ctrl+Alt+Shift+X (the Notepad++ shortcut to launch the page you're coding in Fx) to be that much of a bother.

For Mac, I use Textmate. It's absolutely the best text editor for any system that I've run across. In fact, I do my ActionScript-ing in it too.

If you're on a Mac and like the preview mode, i've heard many great things about Coda. I've been meaning to give it a try myself but just haven't had the opportunity.

Happy coding :D

dulede

05-30-2008, 04:22 AM

PC so i'll try Notepad++

thanks again, dulede