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
Related
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
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:600px;
max-height:440px;
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;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
Have a rather simple spoiler code for my website. It has sort of large border radii, which is fine when the element is expanded, but not so much when shrunk. Is there some way I can make the bottom border radii just go to 0px when its shrunk, or is that just not a thing with CSS?
And I would, yes, like it to be a CSS solution. It's no real problem for me to have to shrink the border radius, but y'know, might as well try to not if its possible.
I am not sure how to make the javascript my code uses work on stackoverflow (it just gives me errors), so here is a screenshot of what it looks like expanded.
.panel {
background-color: #F9F9F9;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family:arial;
}
.panel>h3 {
font-size:14px;
background-color:#820D1A;
color:#ededed;
border-bottom:1px solid #000;
text-align:left;
padding:4px;
padding-left:20px;
margin:0px;
border-radius: 21px 21px 0px 0px;
}
.panel>div {
padding:4px;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display:none">(PARAM2)</div>
</div>
.panel {
background-color: #820D1A;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family: arial;
}
.panel>h3 {
font-size:14px;
color:#ededed;
text-align:left;
padding-left:20px;
margin:5px;
}
.panel>div {
padding:4px;
background-color: #FFF;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display: none">(PARAM2)</div>
</div>
Does this look closer to what you are trying to achieve? There were two padding rules on the h3 and I was wondering why you have a background on there as well? Would this not work with your Javascript?
Eh, after messing around I came to the answer that no, it isn't possible. I just resolved to decrease the top border radii by 5 pixels (making them 17px) so that it'd look normal open or closed.
Thank you to everyone who put forth some help, though~
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
I'm having an issue with css in Internet Explorer, however it is only showing when i'm testing in Browserstack. It shows on all versions of IE that I test on with Windows 7. On my PC it appears fine with my version of IE and when I change the browser mode from within. I'm not sure if it's a quirk or Browserstack or an IE issue that i'm missing.
The area concerned has 2 paragraph tags, 1 floated left the other right, both width 45%, display block, overflow hidden. Each has an anchor tag inside display block, with a background color and border on. The second link is like it's mirroring itself, looks really odd and i can't find anything on this, anyone seen this before and know how to fix? Or is it a Browserstack quirk?
Screenshot of what's happening here
Thanks!
edit, added code:
<style>
a.button {
background: #c10075;
-webkit-background-clip: padding-box;
color: white;
display: inline-block;
padding: 15px 0;
border-radius: 4px;
border: 2px solid #c10075;
border-bottom: 2px solid #8e0056;
border-right: 2px solid #8e0056;
text-transform: uppercase;
text-align: center;
font-family: Rokkitt, serif, Arial, Helvetica, sans-serif;
font-size: 28px;
display: block;
}
a.button:hover {
background: #8e0056;
border: 2px solid #8e0056;
color: white;
}
.cta-buttons p{
width: 45%;
float: left;
}
.cta-buttons p.last{
float: right;
}
</style>
<div class="container cta-buttons">
<p>
Apply now
</p>
<p class="last">
Book your visit
</p>
</div><!-- .cta-buttons -->