I'm styling a text ad and want to change the positioning of some of the text, but I don't have access to the markup so I'm trying to accomplish it with just CSS.
Right now, it displays with an h2 on one line, an anchor tag on the next, and a paragraph below that:
ad title
right-aligned ad link
ad text......................
.............................
Instead, I'd like it to display with the paragraph above the anchor:
ad title
ad text......................
.............................
left-aligned ad link
I created a jsfiddle with the markup and the current CSS. Also, it's worth mentioning that I am not supporting IE older than IE9.
Any help would be appreciated, thanks!
Sometimes you can solve this task with table-caption trick. Not everybody knows that table can have caption element which can also be moved to the bottom with caption-side property. So we can emulate it with display property:
.a-item {
display: table;
}
.a-item .site {
...
display:table-caption;
caption-side: bottom;
}
Demo: http://jsfiddle.net/Uw8BG/5/
You could also go with Flexbox, but it will not work in IE until version IE10 (old syntax). However this trick will work in IE8+.
As #Dryden Long suggests you should take a look at this answer.
I have updated your fiddle with the proper CSS.
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.a-item h2 a{
float:none;
}
.a-item p a {
float:none;
}
.a-item .site{
text-align:left;
display:block;
margin-bottom:10px;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
p {
display: block;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin:10px 0 5px 0;
}
.a-item {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.a-item p {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
Related
I'm developing on firefox, and I just wanted to check the current state how it looks in Chrome. And I saw a little problem. After that I checked it on Edge and on IE as well and the problem is in all browsers except firefox.
To show my problem, here's an image:
As you can see there is no problem. A navigation bar positioned to the bottom of an image
But in the other browser's they are look like this:
You can see 2 or 3px difference. I don't know why. I'm using only two CSS file. The bootstrap-grid system and mine SCSS file.
I checked them out in Inspectors, FF says its height is 42px, while Chrome says 40.
SCSS:
nav{
top: 254px;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
nav a{
text-decoration: none;
text-transform: uppercase;
font-family: $nav-font;
font-size: 25px;
color:#126ADE;
letter-spacing: 0.8px;
margin-left: 20px;
padding: 5px;
}
nav a:first-child{ margin-left: 0px;}
nav a:hover{ background: white;}
In such a scenario, I try to use separate CSS rules for Firefox and Chrome:
Rules common to both browsers:
nav {
position: absolute;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
For Firefox alone:
#-moz-document url-prefix() {
nav{
top: 252px;/*making the height same as chrome*/
}
}
Only for Chrome:
#media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}
Hope that helps!!
I am trying to move my footnotes to the very left of the page instead of the default block indentation, but am not having success. Here is the relevant code:
.footnote {
font-size: 0.75em;
display: none;
display: footnote;
display: prince-footnote;
position: footnote;
counter-increment: footnote;
footnote-style-position: inside;
margin: 0 0 5px 5px;
padding-left: 10px;
text-indent: -10px;
line-height: 1.4;
text-align: left; }
Any help is appreciated.
It seems you have used a display element that is redundant, also try floating the element to the left.
float:left;
if this doesn't work, please post the html so we can see what your dealing with:)
Hi I have tried for 2 hours everything that I could find on the net with this to no avail. So my last hope resides here.
You can check the site at:
http://webofdreams.ro/vworker/finemaid/finemaid.html#
the navigation is overview and services.
html:
<div class="contentNav clearfix">
<ul class="clearfix">
<li><a class="show1 navButton" class="left" id="activeLink">Overview</a></li>
<li><a class="show2 navButton" class="right">Services</a></li>
</ul>
</div>
css:
.clearfix {clear: both;}
.contentNav {
color: #ddd !important;
font-size: 1.5em;
padding: 0;
margin: 0;
display: block;
text-align: center;
}
.contentNav a {
color: #fff !important;
}
.navButton {
font-size: 18px !important;;
padding: 5px 15px;
background: rgb(122,188,255); /* Old browsers */
}
.contentNav li {
display: inline-block;
}
/*IE specific css*/
.navButton {
zoom: 1;
*display: inline;
}
.navButton a {
zoom: 1;
*display:inline;
}
.height {
height: 45px;
clear: both;
}
IE only supports display: inline-block for elements that are natively inline. <li> elements are natively block, so in IE, you need to keep it as display: inline, but trigger hasLayout on the element, like so:
display:-moz-inline-stack; /* only for older mozilla browsers */
display:inline-block;
zoom:1; /* triggers hasLayout */
*display:inline; /* resets element to inline for IE */
Here's the article I found this solution on some time ago:
Cross Browser Support for inline-block Styling
That said, I've never tested this in IE6, because IE6 is 11 years old and shouldn't be supported anymore. But it's worth a shot. The article was written in '07, so he may have tested in IE6
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:
|left side..right side|
link1 link1 link3 link4
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.
Here's a demo: http://jsfiddle.net/tBu4a/9/
That's straightforward to do with CSS2:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
}
a {
display: block;
}
Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.
--edit
OK, now I think I understand your requirements:
ul {
display: table;
width: 100%;
border: 0;
padding: 0;
background-color: blue;
}
li {
display: table-cell;
border: 0;
padding: 0;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
a {
display: block;
padding: 0.25em 0;
background-color: white;
text-decoration: none;
}
Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).
http://forumgallery.rollinleonard.com/artists.php
white-space: nowrap; applied to li. gets very screwy in IE. Instead of each .li item staying together and moving to the next line the whole thing becomes one super long line.
Here is the relevant part of the css (text.css)
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
white-space: nowrap;
}
li.artistlist:after {
content:", ";
}
li.artistlist:last-child:after {
content:"";
}
li.last-child{
content:"";
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
}
ul li{
margin:0;
padding:0;
}
.artistlist li {content: expression(this.previousSibling==null?', ':'');}
The description of the nowrap property of white-space is: "Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a br tag is encountered."
Are you saying that all the li tags are displaying inline? Because that's what you're specifying when you declare "display: inline." With all the list elements inline and unable to break the line without a br tag, you are getting the exact behavior you've defined in your CSS.