i'm having a hard time getting my Footer Navigation to show up properly now that I'm using some new CSS rules. In addition to this problem IE 9 shows my IMG with a border around the outside of it (much like the underline of a linked item).
Questions as follows:
Why is IE creating a border despite img a { text-decoration: none; } ?
What is up with the footer being all wonky? What am i missing?
Here is my jsfiddle: http://jsfiddle.net/misterizzo/fTe5Q/
<
body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Everything shows up nice in current FF and Chrome browser (as usual)
Thanks!
First question:
You should use a normalise.css to make browsers behave more consistent.
http://necolas.github.io/normalize.css/
This is the bit you need out of that file.
/**
* Remove border when inside a element in IE 8/9.
*/
img {
border: 0;
}
Second question:
Try to increase the width of your footer ul
#footer ul {
width: 530px;
}
Hope that helped.
Related
I cannot get a div within a list to display inline. It seems to create a line break.
I have tried using a clear div, setting the body font-size to 0, rearranging the html and all sorts of other things to no avail.
jsfiddle: https://jsfiddle.net/Loy4a2st/1/
.guiding_more_info_button{
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
display:none;
}
<h2>Itinerary</h2>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
P tag block element, apply p tag to inline
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
.inline{
display:inline;}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p class="inline">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have used your code and made some adjustments.
.guiding_more_info_button {
font-family: maratExtraLightItalic;
cursor: pointer;
display: inline-block;
}
.guiding_more_info {
margin-left: 3rem;
font-family: maratExtraLight;
display: none;
}
#day3 {
display: inline-block;
}
<h2>Itinerary</h2>
<li>
<p>Day 01 </p>
</li>
<li>
<p>Day 02</p>
</li>
<li>
<p id="day3">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li>
<p>Day 04</p>
</li>
<li>
<p>Day 05.</p>
</li>
You can view the fiddle here:
https://jsfiddle.net/fo6ryj29/
You need to make both elements you want to show next to each other display:inline-block.
In your case the div and the p tag.
Your html isn't written correctly. You need to wrap your <li>'s in the <ul> element for it work properly.
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have header which has ul tag with content inside. I can't inline them.
HTML
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
</ul>
</div>
Here is fiddle
1) Delete all your CSS and include the bootstrap css and js from CDN since you are using the bootstrap navigation syntax.
2) Change the p element to a span and you are good to go.
To inline them completely with images set p1 class display style to inline-block and remove flex-direction. Like this:
.p1 {
display: inline-block
}
https://jsfiddle.net/toL6f4h5/
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example