I have been searching over the internet for the past few hours looking for a solution to this problem and have been unable to find anything, although a few similiar issues, none appear to be the same as this.
I have a list, which contains 2 span elements. I wish the first span element to float to the left, and the second to float to the right.
In all browsers besides IE 7, which makes has the the right element appearing on the next line.
like so :
LEFT
LEFT RIGHT
LEFT RIGHT
RIGHT - (this is not meant to be in a code block, unsure how to remove it)
(there is more then 3 elements, but that is a general example - the page with the issue is located at : http://www.blisshair.com.au/testing/)
I am unsure of which modifications to make to correct this.
If anyone is able to help me out I would be much appreciative.
Regards.
Try Add this to your CSS this might help you
#basic_info ul {
padding:0px;
margin:0px;
list-style-position:inside;
list-style-image:url(tick.png);
width:100%;
position: relative;
font-size:0.8em;
float: left;
}
#basic_info li {
border-top:0.1em solid #DFDFDF;
background:#F7FEF3;
position: relative;
width:100%;
float: left;
}
try adding clear:right to the li element like
#basic_info li {
border-top: 0.1em solid #DFDFDF;
background: #F7FEF3;
clear: right;
}
Related
I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/
On this page, why is .section not sitting at the top of #content?
I asked some friends, and they don't know either.
Because you've set #content to display: inline; float: left; on line 56 of layout.css.
Quite the disaster
(.tabs { display:none; } or .tabs { float: left; }) and
#node-7 .field-item.even p { float:right; }
A friend figured out that there were 2 elements nested inside .content that were being put there by Drupal, that was causing the extra space at the top of #content. The wierd thing is, they have to be removed together, in order for the space to go away.
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.
I think I might be having a problem, not sure if it is a problem because I have been looking at it for sooooo long, I don't even know if its centered or not.
http://jamessuske.com/thornwood/gallery.php
What I am trying to do is center the entire gallery, to me it looks like its a bit to the right. If anyone can help me figure this out, that would be great. Thanks in advanced.
CSS CODE
.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}
.gallery{
width:912px;
margin-top:6px;
}
.gallery ul{
list-style-type:none;
text-align:center;
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
It looks like you just need to remove the left padding on the element in your .gallery:
.gallery ul { padding-left: 0px; }
Depending on what web browser you're using, there is usually a default padding on lists.
Update: Oh, I see what you are trying to fix now, the stuff inside the container:
All you need is
.gallery ul {
padding: 0;
}
Original:
One thing you may want to do is pick up a tool like XScope: http://iconfactory.com/software/xscope. It's an application that has tools for designing (rulers, guides, browser size frames, etc.). The ruler could help you with this because it measures pixels on your screen. You can quickly measure how many pixels are on each side of your layout.
Also here is something similar but a little less elegant: http://www.arulerforwindows.com/
It's not centered. (There are now three people claiming that it's centered, but I have no idea what they are looking at...)
You are using a list for the images, and it has a padding on the left side by default.
You are using padding in the links to get a space between them, but you are only padding on the left and top sides, so that will also add extra space on the left.
Set the left padding to zero in the list:
.gallery ul{
list-style-type:none;
text-align:center;
padding-left: 0;
}
Make the left and right padding in the links more even:
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 2px 0 3px;
}
You are right it is not centered.
I think, but am not sure, that it may be a padding issue, you set the padding left but not equally right on a couple elements in the container.
all left padding to 0px (or use equal padding left and right
like this - padding: 5px 5px;
or each image can have 0 padding and equal margin: 5px 5px;