My vertical navigation displays with extra spaces when I view it in IE6, it looks fine in IE7, Safari and FF. This is a style sheet that I have used in numerous other sites before without any problems.
Here’s a screenshot of the culprit in IE6: http://freshbrand.com/STUFF/css_nav_ie6.png
Here’s a link to the test page: http://freshbrand.com/shv/kids.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ah yes, the fabulous list whitespace issue with IE. One extremely quick fix for this is to turn your code to More Efficient. That gets rid of the linebreaks, which in turn makes IE behave correctly.
I have taken to coding lists without any line breaks, just because it fixes this problem. I imagine you could also fix it with
li {
float: left;
width: 100%;
}
But I haven’t tried that at all.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter
Thanks both did the trick, I opted to go with
li {
float: left;
width: 100%;
}
Cheers
Marcel
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The method I like is even simpler:
.navlist li a {
width:166px /* the width of the ul element */
}
The hover responds to the whole li element this way, instead of just the text.
On Wed, May 28, 2008 at 6:50 PM, waltd wrote:
li {
float: left;
width: 100%;
}
–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/
I made an example here using code from the original:
http://www.thebigerns.com/freeway/workbench/fw5_helveticus-IEmenuspacing/index.html
The Big Erns just wrote:
The method I like is even simpler:
.navlist li a {
width:166px /* the width of the ul element */
}
–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/
Again - forgive me jumping in here - how do you get to the code to make these adjustments please ? (I’ll worry about how you establish where, in the code, the problem is later). Roger
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
@ Helveticus : By the way … it looks fantastic. Very well done!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Not a problem, Roger.
Custom CSS code can be added in Freeway through the Edit Styles interface (Style Palette, toggle open Edit Styles). Freeway normally creates the page code for you, automatically adding CSS styles to the structures that you decorate like text and boxes. However, there is a limit to Freeway’s automatic abilities and this is when the knowledge and intelligence of an actual human being comes in handy.
You could, of course, open the html documents in a text editor and add the code you desired manually… but then you’d have to do the same every time you re-published the file from Freeway. Or you could do as many others have done – trick Freeway into publishing your customizations for you.
Freeway creates HTML structures and CSS styles based on the elements that it recognizes in your document. If you know what it will or won’t recognize and how it will express that item in the published code, then you can use Freeway to work around its own shortcomings.
For example, Helveticus created the list structure his menu is based on quite easily in FWY5 via the new List pane in the Inspector palette. When it is published it has all the structural elements of an unordered list – the ul container and the list item (li) tags. Freeway even applies some styling to the ul element as the class stlye “.navlist”. However, Freeway cannot directly affect the list element (except through inheritance from the list container). This is where a user with a little CSS knowledge comes in.
Freeway mostly styles elements as class styles, which it attaches to objects that you “touch” in its work environment. However, it does natively support some “tag” styles – these are styles that affect HTML structural elements, such as header text. This is how I exploit Freeway to apply my custom style not only to the list items, but specifically the list items in that one list which are links.
In the Edit Styles window I create a new style, and in the Tag field (not the Name Field) I enter this: .navlist li a
This is CSS shorthand for "Links that are in List Items in containers with the class style “navlist” applied to them. Browsers will only apply this style if all these conditions are met. And since I know how Freeway will write the code for the list/menu, I know it will be recognized.
Freeway will insist on applying a name in the Name field, but that would screw up our plan, so delete it then tab out of that field so Freeway will accept the Tag name. There are other reasons for using the Tag field for our name – styles named with only the Name field are published ONLY IF THEY ARE APPLIED PHYSICALLY TO AN OBJECT IN THE PAGE VIEW WINDOW. Sorry about the caps, but it’s an important point. Also the name field IS INCAPABLE OF SUPPORTING SPACES, DASHES, OR ANY OTHER CSS LEGAL CHARACTER short of letters and numbers.
Freeway still limits the type of style attributes that can be applied natively in the Edit Styles window, so now we resort to the Extended Styles sub-window where we create the new attribute “width” with a value of “166px”. The reason we choose this value is to define the list element width the same as the list container. Essentially this was previously done using the attribute display:block, but IE6 just doesn’t get it. So we spell it out with the width attribute.
When we’re finished, our new style will not be recognized or applied within Freeway’s Page view, but it will be recognized by browsers and in Freeway’s Preview window.
Sorry that this is was long and a bit primer-ish, but I didn’t want new-ish folk scratching their heads. For some, CSS coding in Freeway is a bit of a left turn… I am sincerely hoping that Softpress will steer (at least the pro application) Freeway in the direction of greater CSS control.
Roger Burton wrote:
Again - forgive me jumping in here - how do you get to the code to make these adjustments please ? (I’ll worry about how you establish where, in the code, the problem is later). Roger
–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/
Thanks Ernie - well I understood about 4 words from your excellent and comprehensive reply but am looking forward to learning a little more about what you, very kindly, tried to explain. I will obviously have to try and get my head around a little CSS - after I’ve got my head around a little Freeway 5 pro. I must say I’m enjoying the programme more than Dreamweaver because I don’t have to dig under the bonnet too much but then sometimes one has to get ones hands dirty. I’ll keep digging - Best Roger
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options