No idea why I can't figure this out and I am sure it is simple...
I have a title that has a cut-through using the following code -
h2.boxtitle2 { width:100%; text-align:left; border-bottom: 1px solid #FFCC00; line-height:0.1em; margin:10px 0 10px; }
h2.boxtitle2 span { background:#fff; padding:0 10px; font-family: Arial, Helvetica, sans-serif; font-size:18px !important; margin: 0 10px; padding: 0 5px; font-weight:normal; text-transform:uppercase; color:#666666 !important;}
<h2 class="boxtitle2"><span>Key Dates</span></h2>
Looks great in all browsers except IE7... Anyone know how I can fix it there - and it is an in house website where about 40% of users are on IE7.
Position:relative and z-index:2 on the span element seems to work in my IE7 but may not be the best solution:
http://jsfiddle.net/zrxqB/13/
Try to remove the line-height 0.1em. With this line-height there is not enough space for the heading on the row. Try other way ... png may be ...
Related
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
I have gone from this:
www.gofar.org
To this:
www.gofar.org/homepagetest.html
I have tried to remove the one block seperator on the far right end of the nav bar. I am lost.
I tried putting it in a div but what I really need to do is make the background image (green) go from the left side of the header to the edge of the right side.
Just do not know how.
here is the css
ul#saturday{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background:transparent url("bgOFF.gif") repeat-x top left;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
border-bottom:4px solid #336666;
overflow: hidden;
color: #003;
text-align: center;
z-index: auto;
}
I even tried putting it in a table but it never fits across the entire header.
This may help.
/* Remove left padding from header */
.twoColFixLtHdr #header {
padding: 0 10px 0 0px;
/* padding: 0 10px 0 20px; OLD - Delete this line*/
}
/* Add left padding to ul */
ul#saturday {
padding-left: 10px;
}
/* Remove border bg from last anchor */
ul#saturday li:last a {
background-image: none;
}
Also, Read/watch these on chrome inspector tools,
you can edit the CSS live in the browser which
makes things easier for beginners and experts alike.
https://developers.google.com/chrome-developer-tools/docs/videos
you can try instead of using width:100%, change it to the width of the white container. That way it would go all the way across. Width:100% only sets it to as large as the content.
I am talking about the "Previous" and "Next" post navigation links below the articles on my website, which look like this (below) in all modern browsers (IE > 7)
But in IE6 and IE7, it looks like this
Yes, the rest of my website looks very fine in these browsers as well, and want to get this to work, and without breaking anything else. I see that IE6 and IE7 can have float issues, and that there's a fix as well (a working one, I couldn't find).
This is the HTML code pertaining to the post navigation (mentioned above):
<div class="post-entries">
<div class="nav-prev fl"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</div>
<div class="nav-next fr">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></div>
<div class="fix"></div>
</div>
and here's the CSS code pertaining to the above:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }
.fl{float: left;}
.fr{float: right;}
.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}
I hope I am clear. Can someone help me out with this?
How about this? Added css:
/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}
Updated fiddle: http://jsfiddle.net/y3MBC/14/
I think if you just add a <div style="clear:left;></div> in between the two divs it will format the way you want. I tested it in ie7 but don't have an effective way of testing for ie6. Here's the updated fiddle: http://jsfiddle.net/D3Jja/
Looks like you haven't specified a width for the div's. Try this:
.fl{float: left; width: 100%}
.fr{float: right; width: 100%}
Also if you plan on using margin/padding add a display: inline to your floated elements to prevent old IE from doubling the amount of margin/padding.
Thanks to #marissa.c for the help, this is the answer...
modify this line:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
to his:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }
And then add this line:
.nav-prev, .nev-next { display:block; width:100%; }
And that fixes the float issues. It now even works in IE6, all credit to #marissa.c