Related
I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
I'm trying to make the text of this parallax effect NOT to scroll down at the same as the effect.
I believe it has something to do with the html CSS code(overflow), I've tried putting into different places but it did not work. Is there any way to make my parallax work as it is now and while you scroll down the text will still be fully visible? Cause as soon as you scroll down the parallax AND the text scroll as well but by the time you reach the text, some have already scrolled up.
html {
height: 100%;
overflow: hidden;
}
body {
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header:before {
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url('../img/lake.jpg');
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
p {
color: grey;
}
.container {
max-width: 95%;
margin: 0 auto;
display: block;
}
<header>
<h1>Parallax Effect</h1>
<p>Pure CSS // No JavaScript!</p>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
</div>
Your container class needs to be positioned relative to its parent for it to show up in front of the parallax background.
.container {
max-width: 95%;
margin: 0 auto;
display: block;
position: relative;
}
You'll need to add some background color to separate it visually as well.
Here's a Codepen demo with a similar effect and its accompanying article.
I have created 2 div one with float: left and one with float : right, each with 50% column width. Still they don't flow as expected. The second float not just on the right side of the first div but below the first div. Float doesn't behave according to the rule. So what rule am I missing here ?
<html>
<head>
<title>
</title>
<style type="text/css">
.column {
width: 50%;
}
div.right {
float: right;
}
}
div.left {
float: left;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
Your CSS is invalid, so stopping the rest of your stylesheet loading.
See here:
div.right {
float: right;
}
}
You are closing the rule twice, remove the second closing bracket
Fiddle
.column {
width: 49%;
}
div.left, div.right {
float: left;
border-right: 1px solid;
}
Reduce your width. You need side by side, So you add float left since both are under same container.
Demo.
.column {
width: 50%;
}
div.right {
float: right;
}
div.left {
float: left;
}
img {
float: right;
padding-right: 15px;
margin: 0 0 1em 1em;
}
I'm developing a theme for Wordpress.
As usual, there are the main page (index.php or home.php) with post summary and single.php file to display a certain post.
On the main page, the image alignment works as follow:
When I resize the page...
Inside single.php, it shows so:
I'm using this stylesheet:
/* Images */
.alignright {
float:right;
margin: 0 0 10px 20px;
}
.alignleft {
float:left;
margin: 0 20px 10px 0;
}
.aligncenter {
display: block;
margin: 0 auto 1px auto;
clear: both;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 12px;
font-style: italic;
line-height: 20px;
padding: 0 5px;
margin: 5px 0;
}
How can I fix these problems?
Best regards, Vi.
Note: code of post body is:
<article class="post-9 post type-post status-publish format-standard hentry category-uncategorized tag-ipsum tag-lorem tag-smashing tag-sticky" id="post-9">
<!-- Display the Post's content in a div box. -->
<div class="entry">
<div id="attachment_10" class="wp-caption alignright" style="width: 253px"><img class="size-medium wp-image-10" alt="Smashing Pumpkins" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/SP-Poster-243x300.jpg" width="243" height="300" /><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc.</p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc. <ins datetime="2012-12-19T17:23:48+00:00">Donec diam sem, porta id facilisis sit amet</ins>, auctor et justo. Mauris sapien urna, imperdiet imperdiet pharetra in, tempus id augue. Sed vitae leo purus. Donec consectetur porta leo vitae luctus. Sed sed mollis nulla.</p>
<p>Praesent venenatis gravida pellentesque. Pellentesque sit amet orci sem, vitae gravida massa. Maecenas suscipit volutpat felis. Proin placerat est at ipsum fermentum vulputate.</p>
<p>In ac erat lacus, ac congue urna. Nunc egestas luctus orci, ut elementum neque gravida vel. Vivamus blandit nunc vitae mauris convallis ac euismod felis ultricies. Phasellus ac ligula lorem, in adipiscing velit. Aliquam auctor ultricies est, vitae condimentum tellus consequat eget.</p>
<div id="attachment_34" class="wp-caption alignleft" style="width: 250px"><img class="size-medium wp-image-34 " alt="Benuimaru" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/Benimaru-Nikaido-240x300.jpg" width="240" height="300" /><p class="wp-caption-text">Benimaru Nikaido</p></div>
<p>Nulla tempor, ante pulvinar vehicula faucibus, turpis mi pellentesque est, eget egestas lectus nulla vel nisl. Curabitur in turpis id eros ultrices gravida. Nam vel mauris in nibh blandit facilisis et ut dui. Donec in dignissim diam. Maecenas aliquam porttitor sapien, at tempus mauris tincidunt ut. Donec ut lectus id ante fermentum pretium. Curabitur auctor orci eu magna ultrices auctor. Etiam placerat, magna nec ultricies convallis, elit turpis mattis felis, ut dapibus lorem orci in enim. Fusce ipsum felis, commodo et posuere quis, commodo ut lacus. Pellentesque tristique augue varius arcu blandit mollis. Donec aliquam purus vitae augue vehicula placerat. Aenean libero nulla, rutrum in volutpat id, viverra id nunc.</p>
<ul>
<li>Quisque auctor consequat sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nullam luctus placerat lorem ornare volutpat. Integer <code>euismod magna</code> a neque fringilla eget mollis orci tristique.</li>
</ul>
<pre>Etiam sagittis augue vitae nunc imperdiet ut vehicula diam condimentum. Etiam non massa libero. Nam eget mi felis, nec dapibus neque. Cras viverra eleifend cursus. Aliquam sagittis auctor accumsan. Vivamus tincidunt, metus a varius condimentum, nisl erat commodo libero, et faucibus urna dolor eget nisi. Cras mi lectus, dictum sed volutpat eu, laoreet non mi. Aliquam dolor odio, malesuada sed volutpat et, facilisis sit amet eros.</pre>
<p>Aenean hendrerit feugiat leo, eget sollicitudin mauris pretium non. Suspendisse potenti. Quisque eget nunc magna. Proin lectus dolor, consequat et vulputate id, vehicula id velit. Cras at elit id turpis luctus pretium sed eu ante.<del> Nunc rutrum pulvinar dapibus. Mauris nisl mauris, porttitor in pulvinar nec, auctor ac felis.</del> Aliquam malesuada purus sed augue condimentum et lacinia turpis porttitor. Donec tempor aliquet ligula, elementum facilisis est congue eget.</p>
<blockquote><p>Nullam dapibus aliquet sem, vel mollis elit sagittis vel. Etiam quis leo ante, ut ultricies orci.</p></blockquote>
<p>Mauris eget ipsum orci, et euismod tortor. Integer gravida justo nisl, in dictum eros. Maecenas<strong> venenatis erat eu tortor consequat porttitor eu et lectus</strong>. Maecenas volutpat nibh quis nisl tempor quis faucibus enim rhoncus. Vestibulum placerat, dolor in faucibus lacinia, augue odio rhoncus justo, sed facilisis lectus nulla eget tortor. Donec vitae purus nulla. Quisque ut tellus quis turpis fermentum bibendum. <a title="Sample" href="http://sample">Mauris ullamcorper, massa in suscipit luctus, metus dui auctor est, et mattis dolor tortor quis elit.</a> Nulla felis massa, auctor vel adipiscing malesuada, tempor a velit. Sed tincidunt congue turpis eget pharetra.</p>
</div>
</article>
You may be able to force it by adding a clear:left to the .wp-caption classes that also have .alignright and visa versa. Having a URL to your site would be helpful to get you something more specific.
Update: You're using a responsive layout, so things will change depending on the browser, but basically it looks like you aren't happy with the way the first image on single.php floats so that it cuts the second paragraph to one word in the first line. There isn't much you can do about that, though, without making writing posts a PITA later on. Your homepage and your single.php are displaying slightly differently, the first paragraph on the homepage is much longer - by about 1-2 lines- than on single.php so that's why the first image floating to the right is behaving differently. As for the unordered lists, this is a typical pain with WordPress image alignment unfortunately, see it all the time. Easiest way to deal with it is to try to structure your posts such that the images don't end up alongside a list or, barring that, set your UL so that it forces a new line using 'clear' and 'display' properties.
The only solution that I've found is the follow:
article .entry ul {
margin: 10px 0 10px 2px;
}
article .entry ul > li {
margin: 5px 0;
list-style-position: inside;
}
/* Images */
.alignright {
display: inline;
float: right;
margin: 0 0 10px 20px;
}
.alignleft {
display: inline;
float: left;
margin: 0 20px 10px 0;
}
.aligncenter {
display: block;
margin: 0 auto 1px auto;
clear: both;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 12px;
font-style: italic;
line-height: 20px;
padding: 0 5px;
margin: 5px 0;
}
And there is the result:
That isn't the best technique there can possibly be, but the result may be considered acceptable (I think).
I set up this fiddle to show how all browsers render the red pieces.
Strangely, IE7 renders that fine (on its own).
However, I have a shadow effect on a new site (that works the same as the red strips) that works on Firefox, Safari & IE8.
I swear I have used this same method countless times before and it has worked in IE7.
Here is how it looks in IE7. The strips don't grow to the correct height (using IE's developer tools showed me that). They are not just not repeating the background image.
(source: alexanderdickson.com)
The site is also available here to view. I am using IE8's compatibility view, which I realise isn't strictly a 1:1 of IE7, but I according to NetRender, this also happens on IE7.
Can someone please kindly tell me what I am doing wrong?
Thanks!
<div id="main">
<p>
Donec laoreet ullamcorper iaculis. Fusce sed dolor vel mi varius dictum. Phasellus vulputate vehicula odio et pulvinar. Cras pulvinar, magna quis cursus tempus; dolor diam tempus magna; a varius magna velit aliquet libero. Donec auctor pulvinar ornare. Fusce fringilla velit fermentum elit ornare quis porttitor justo vestibulum. Sed feugiat leo in tellus elementum venenatis. Praesent enim lacus, luctus ac porta vitae, iaculis eu arcu! Praesent commodo eleifend lacus, non fringilla orci commodo non. Praesent varius adipiscing purus, et accumsan orci porta nec? Cras imperdiet blandit dapibus. Curabitur dolor magna, imperdiet at euismod non, pharetra in turpis. Integer aliquam neque a justo imperdiet fermentum. Aenean et vulputate orci. Aliquam volutpat, sapien sed sollicitudin porta, risus massa gravida nibh; pharetra vulputate nisl orci ac nibh? Fusce vehicula tristique magna ut suscipit. Morbi imperdiet diam quis nibh sagittis consequat.
</p>
<p>
Nunc tempus iaculis justo quis ultrices. Nulla diam orci, euismod sed mattis id, condimentum ac est. Maecenas sodales egestas massa hendrerit ultrices. Fusce ut ante id leo placerat pellentesque. Mauris ante dolor, porta quis blandit vel; tincidunt sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum, nunc vitae posuere suscipit, leo leo dictum nunc, vel laoreet eros dolor ac lacus. Duis at nibh nec lectus commodo vehicula sit amet sed sem. Sed eu massa orci! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tellus nibh, lacinia sed imperdiet nec, vestibulum ut nunc. Donec fermentum placerat felis, porta lacinia erat pellentesque vel. In eu ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Praesent fringilla mattis lobortis? Sed id porttitor massa! Pellentesque sodales felis et lacus tincidunt sit amet adipiscing arcu aliquam. Proin ullamcorper elementum urna nec mollis. Etiam convallis elementum massa in egestas! Ut pharetra mauris nec mi auctor posuere. Fusce a velit quis tellus accumsan blandit et sit amet odio. In hac habitasse platea dictumst. Nullam nunc orci; pulvinar ac lacinia id, tincidunt at dolor. Curabitur facilisis volutpat sagittis. Maecenas luctus rutrum ante et tincidunt. Nulla non dapibus dui. Proin consectetur pellentesque nunc, ac convallis enim venenatis ut. Aliquam a interdum nibh. Curabitur tristique ipsum ornare ante semper eget luctus nulla volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non est sem. Nulla sodales, metus sit amet ullamcorper mollis, velit velit tempus odio, at tristique diam lorem non risus. Suspendisse dictum lorem laoreet metus euismod gravida. Nullam dapibus magna nisi.
</p>
<div id="shadow-left"></div>
<div id="shadow-right"></div>
</div>
html {
width: 100%;
height:100%;
}
div#main {
width: 100px;
min-height: 100%;
margin: 0 auto;
position: relative;
}
#shadow-left,
#shadow-right {
width: 30px;
height: 100%;
position: absolute;
top: 0;
background: red;
}
#shadow-left {
left: -30px;
}
#shadow-right {
right: -30px;
}
I'm not sure why you would apply your shadows in this manner though. How I usually do it is have a wider container (including the widths of the left/right shadows) aligned center (in this case, it's your #mainContainer div, then set a y-repeating background (that is the shadow - just a couple of pixels high will do). I will then specify another div within this container, smaller width, center aligned, that will contain all the text.
Edit: Just noticed your fiddle. I think it may not work in this case due to css conflicts, possible from the osCommerce stylesheet? I'll try to look deeper..hmm
EDIT2: Okay I've traced it to this particular code in stylesheet.css
#login-link,
#logout-link {
position: absolute;
bottom: -20px;
right: 50px;
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
Login to GolfBallBusters
It's your absolute positioning of this element that's causing the problem. Removing the styling fixes your shadow problems. :)
EDIT FIX:
This should fix it. Or at least it does on my stripped down version of your site layout.
Change #user and #login-link to the following:
#user {
float: right;
color: #f90;
position: relative; /* addition */
}
#login-link,
#logout-link {
position: absolute;
top: 31px; /* addition */
/*bottom: -20px; REMOVED */
right: 50px;
height: 15px; /* addition */
white-space: nowrap; /* addition */
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
FIX2:
Change
#user-options .bottom-shadow {
display: block;
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
#bottom: -5px;
left: 0;
background: url(images/layout/shadow-bottom.png) repeat-x;
z-index: 50;
}
TO
.bottom-shadow {
width: 100%;
height: 7px;
margin-top: -10px;
background: url(images/layout/shadow-bottom.png) repeat-x;
}
And your HTML layout should be:
<div id="user-options">
<div id="choose-your-country">
<p>Choose your country > </p>
</div>
<div id="user"></div>
<div id="current-locale">Golf Ball Busters - AU</div>
<br class="clear">
</div>
<div class="bottom-shadow"></div>
Noticed I change bottom-shadow into a div element and moved it out of <div id="user-options">.
try giving #mainContainer height: 100%