I have a set of columns on my site. Each item is an <a> within an <li> and a member of an <ul>. The columns are set up so that the top-most <li> has a different class from the lower <li>'s in the same list (<ul>).
In IE7, the top <li> element will not align appropriately with it's lower neighboring <li>'s.
Here is how it should look (Latest version of Google Chrome):
Here is how it looks in IE7 (looks fine in >=IE8):
**Don't mind sizing differences.*
Here is the trimmed HTML for a single column
<div class="map-col" id="map-2">
<ul class="site-map">
<li><a class="map-upper">Services</a></li>
<li>Wood Fencing</li>
<li>Ornamental Iron</li>
<li>Gates and Openers</li>
<li>Restoration</li>
</ul>
</div>
Here is the CSS (I pulled out anything that didn't have to do with positioning --such as font-weight and font-size-- for readability)
.site-map{display:inline;}
.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}
#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}
As far as it seems to me, IE7 just doesn't like when two separate CSS classes are appended to a single list.
Don't define text-align property for anchor tags.. Use it in LI. i.e
ul.site-map li{
text-align:left;
}
I was able to figure it out. For anyone with this issue in the future here is the simple fix:
It appears that IE7 has an indentation/margin bug on list elements. To get around this, the I modified the <li> elements to have a defined width of 100% so that they will fill the entire area of the <ul>. This allows the text to be left aligned correctly.
Added the following:
.site-map li{display:block; width:100%; text-align:left;}
Related
I wanted to make a nested sorted list with css counter. However, when I tried to do it with <ul> and <li> tags, I noticed that there were shifts in the <li> tags. How can I edit these shifts from a single center without typing padding-left?
Examples:
Original <ul> <li> tags.
Original ul li
What I want to do:
What I want to do.
The css properties I tried:
position: relative
&
position: absolute
I don't want to write the following for each element all the time: margins or paddings.
ty so much my dear friends...
By default Bootstrap sets paragraph margins to zero, it also removes the default styles from lists (such as paddings/bullets).
The reason they do this is well explained, pretty clear and understandable.
Use case: we have a section of user-generated content on the page with applied Bootstrap 5 styles; this section contains paragraphs and lists, which we would like to be displayed with the default styles (such as: paragraphs have margins, lists have bullets etc).
Question: is there any way to do that without assigning classes to each paragraph / list and without redefining those styles again back to original?
Best solution would be some class applied to wrapper, which applies the default styles to all the children elements (i.e. 'resets the reset'), but reading Bootstrap docs did not help.
Thanks.
You may be able to wrap the content in a single element and use revert to undo Bootstrap's reset.
.normal-typography p,
.normal-typography h2,
.normal-typography ul {
margin: revert;
padding: revert;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="normal-typography">
<h2>Headings and paragraphs</h2>
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<p>The <code><hr></code> element has been simplified. Similar to browser defaults, <code><hr></code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code> via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
</div>
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.