Re: [css-d] Navigation woes
Hi all, I looked at http://www.ryanbrill.com/floats.htm which was related to the subject: Is this possible at all... and noticed that the layout was exactly what I was trying to achieve, so I took Georg's advice and modified as required. I've ended up solving my navigation woes... this layout made it easier to track where the problem was as well. Many thanks Georg! Regards 8-)) Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation woes
Hi Ingo On 24 Mar 2006, at 00:16, Ingo Chao wrote: Hope that helps. Is click to enlarge meant to sit next to the image? Thank you so much for that. It now works perfectly! The click to enlarge is meant to sit underneath and the image is meant to have padding: 5px but with the navigation issue I haven't really looked into it. Any ideas please? Thanks once again for all the help I have received. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation woes
Richard Brown wrote:
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/WordpressRooms/
style.css
I have some recollection that this is a WinIE bug. i.e that it doesn't
display text under a box but alongside it whatever the quoted width.
Some problems with IE in this menu.
- Remove all rules related with .header, .box, .box-width,
and replace them with:
.header {
float: left; /* contains the floating boxes */
width: 100%; /* prevents shrink-wrapping */
background-color: #fff;
}
.box, .box-wide {
margin: 9px 9px 0 9px;
padding: 5px;
font-size: 85%;
font-weight: 600;
}
.box {
float: right;
width: 100px;
text-align: center;
background-color: #FBFBF1;
}
.box-wide {
float: left;
width: 185px;
text-align: left;
}
/* clickable link area */
.box a, .box-wide a {
display: block;
}
/* line-break after img, or keep the br */
.box a img, .box-wide a img {
display: block;
}
- Insert a Conditional Comment at the end of the head section
!--[if IE]
style
/* IE6 fixes */
.box, .box-wide {
display: inline; /* doubled float margin bug */
overflow: hidden; /* stops expanding of the box */
}
/* IE6-7 */
.box a, .box-wide a {
position: relative; /* allows for leaving the overflown box */
}
/style
![endif]--
/head
- Remove the br after the images (optional).
Hope that helps.
Is click to enlarge meant to sit next to the image?
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
Dear All Many thanks to Don and Els! I have played with the ideas a bit further and have now ended up with this. I feel the site is beginning to take shape and provides an excellent building platform. I am a bit worried that the header nav still drops down. Could folks check this for me please? http://www.theoldcoachworks.org.uk/ http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/ style.css On 10 Mar 2006, at 14:23, Don - htmlfixit.com wrote: As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. Many thanks -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
From: Richard Brown [EMAIL PROTECTED]
I am a bit worried
that the header nav still drops down. Could folks check this for me
please?
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/
style.css
The problem you're having in IE is that you've encountered the IE doubled
float-margin bug [1]. The usual fix is to give the element a non-sensical
{display: inline;}. Even if the .out divs weren't already (display:) block
elements, they take on that property by virtue of being floated and do not need
{display: block;} to be declared.
Therefore, you'll need to change your display property in the following
selector to overcome the margin bug. This fix is not likely to bother other
browsers, but certainly could be hidden from them if you so choose.
.out {
display: inline; /* change this */
background: #bbb;
border: 1px solid #ddd;
float: left;
margin: 1em;
}
I hope that helps,
~holly
[1] http://www.positioniseverything.net/explorer/doubled-margin.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
Richard Brown wrote:
Hi
Could anybody help me please or maybe send me in the right
direction?
I am trying to build a navigation for this site:
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/
style.css
As you can see it is a bit of a mess! What I would like to do
is to produce a small photo with a word underneath. The whole
to be contained within a border and to be the link. Is it
possible to do this please and if so how?
lia href=..img src=... alt=..brtext/a/li
li{
list-style:none;
width:60px;
text-align:center;
border:1px solid black;
margin-bottom:5px;
}
li a{
display:block;
text-decoration:none;
}
li a img{
border:0;
}
Obviously, when the width of the word becomes larger than the
width of the li, the word will stick out, or in the case of IE,
make the li wider.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
Richard Brown wrote:
I am trying to build a navigation for this site:
http://www.theoldcoachworks.org.uk/
Following up on my earlier answer where your menu was dropping ... it is
a total width issue that triggers the problem in ie6.
You can easily fix the width issue:
#sidebar{
/*width: 200px;*/
width: 180px;
}
I also added a text align to that in my example to make it match in ff
and ie.
Seems to fix the dropping menu ... I updated my demo:
http://bestfoot.com/temp/temp3.html
There is still a text jump that needs to be fixed on hover over the links.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
