I am using wordpress to develop a website.
I am using my own html template instead of wordpress themes, which has css file also.
When I try to make some html changes in it through the dashboard of wordpress, it doesn't change.
Why it does not happen?
Is wordpress doesn't support html tags sometimes?
Or is the html tags that I use, clashes with css?
code of index page is here.
<?php get_header(); ?>
<div id="content">
<div id="inner_content">
<?php if ( is_front_page() ) { ?>
<div id="content_top">
<div id="business_strategy">
<div id="heading_outer">
<p class="main_heading">Business</p>
<p class="main_heading1">Strategy</p>
</div><!---heading_outer--->
<div id="business_image"><img src="<?php bloginfo('template_url'); ?>/images/inner_image.gif" alt="image" /></div><!---business_image--->
<div id="des">
<p>Owing to its competitive stand in the world India has moved rapidly. There is ample reason...</p>
<span class="read_more">Read More</span></div><!---des--->
</div><!---business_strategy--->
<div id="business_planning">
<div id="heading_outer">
<p class="main_heading">Business</p>
<p class="main_heading1">Planning</p>
</div><!---heading_outer--->
<div id="business_image"><img src="<?php bloginfo('template_url'); ?>/images/inner_image.gif" alt="image" /></div><!---business_image--->
<div id="des">
<p>Owing to its competitive stand in the world India has moved rapidly. There is ample reason...</p>
<span class="read_more">Read More</span></div><!---des--->
</div><!---business_planning--->
<div id="business_planning">
<div id="heading_outer">
<p class="main_heading">Business</p>
<p class="main_heading1">Result</p>
</div><!---heading_outer--->
<div id="business_image"><img src="<?php bloginfo('template_url'); ?>/images/inner_image.gif" alt="image" /></div><!---business_image--->
<div id="des">
<p>Owing to its competitive stand in the world India has moved rapidly. There is ample reason...</p>
<span class="read_more">Read More</span></div><!---des--->
</div><!---business_planning--->
</div><!---content_top--->
<?php } ?>
<div id="content_bottom">
<div id="content_bottom_left">
<div id="content_bottom_intro">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( is_front_page() ) { ?>
<h3 class="content_heading">Who We Are?</h3>
<?php } else { ?>
<h3 class="content_heading"><?php the_title(); ?></h3>
<?php } ?>
<?php the_content(); ?>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<?php else : ?>
<?php endif; ?>
</div><!---content_bottom_intro--->
<?php if ( is_front_page() ) { ?>
<span class="line_bg"><img src="<?php bloginfo('template_url'); ?>/images/line_bg.gif" alt="image" /></span>
<div id="partners">
<h3>Clients</h3>
<div id="partners_logo"><img src="<?php bloginfo('template_url'); ?>/images/logos.gif" alt="image" style="margin-top:10px;" /></div>
<!---partners_logo--->
</div><!---channel_partners--->
<?php } ?>
</div><!---content_bottom_left--->
<?php get_sidebar(); ?>
</div><!---content_bottom--->
</div><!---inner_content--->
</div><!---content--->
<?php get_footer(); ?>
and css is here.
/*
Theme Name: Business_template
Author: Ravneet Singh
*/
#charset "utf-8";
body{
width:100%;
margin:0px;
padding:0px;
background-color:#2e6a92;
}
#main_outer{
width:100%;
float:left;
margin:auto;
}
#inner_outer{
width:900px;
float:none;
margin:auto;
background-color:#FFFFFF;
}
#menu{
background-image:url(images/menu_bg.gif);
background-repeat:no-repeat;
width:900px;
height:114px;
float:left;
margin:auto;
}
#menu ul{
margin-left:75px;
margin-top:-12px;
margin-bottom:10px;
padding:0;
list-style:none;
}
#menu ul li{
list-style:none;
float:left;
}
#menu ul li a{
width:135px;
height:23px;
font-size:18px;
display:block;
color:#ffffff;
padding-top: 25px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-align:right;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#header{
width:900px;
height:203px;
float:left;
margin:auto;
background-image:url(images/header_bg.gif);
background-repeat:repeat-x;
}
#logo{
width:500px;
height:195px;
float:left;
margin:auto;
}
#header_image{
width:400px;
height:195px;
float:right;
margin:auto;
}
#content{
width:900px;
float:left;
margin:auto;
background-color:#FFFFFF
}
#inner_content{
width:890px;
float:left;
margin-left:10px;
margin-right:10px;
}
#content_top{
width:880px;
float:left;
margin:auto;
}
#business_strategy{
width:290px;
height:173px;
float:left;
margin:auto;
background-color:#d7d4c5;
}
#heading_outer{
width:136px;
height:100px;
float:left;
margin:auto;
}
.main_heading{
color:#740a07;
font-size:22px;
font-weight:bold;
padding-left:15px;
}
.main_heading1{
color:#740a07;
font-size:22px;
font-weight:bold;
padding-left:25px;
margin-top:-18px;
}
#business_image{
width:154px;
height:100px;
float:right;
margin:auto;
}
#des{
width:290px;
height:73px;
float:left;
margin:auto;
}
#des p{
color:#4b4d4f;
font-size:15px;
font-weight:bold;
text-align:justify;
padding-left:10px;
padding-right:10px;
margin-top:4px;
}
.read_more a{
color:#740a07;
font-size:15px;
text-decoration:none;
float:right;
margin-top:-20px;
font-weight:bold;
padding-right:10px;
}
.read_more a:hover{
text-decoration:underline;
}
#business_planning{
width:290px;
height:173px;
float:left;
margin-left:5px;
background-color:#d7d4c5;
}
#content_bottom{
width:880px;
float:left;
margin-bottom:15px;
}
#content_bottom_left{
width:600px;
float:left;
margin:auto;
}
#content_bottom_intro{
width:600px;
float:left;
margin:auto;
}
.content_heading{
background-image:url(images/heading_bg.gif);
background-repeat:no-repeat;
width:202px;
height:36px;
color:#FFFFFF;
padding-left:15px;
padding-top:5px;
}
#content_bottom_intro p{
font-size:15px;
text-align:justify;
margin-top:-10px;
}
#partners{
width:600px;
float:left;
margin:auto;
}
#partners h3{
color:#4d4c49;
font-size:22px;
}
#partners_logo{
width:600px;
height:150px;
float:left;
margin-top:-10px;
border:1px #666666 solid;
}
#content_bottom_right{
width:260px;
float:right;
margin:auto;
}
#right_content{
width:260px;
float:right;
margin:auto;
}
#right_content_detail{
width:255px;
height:162px;
float:left;
margin-top:-10px;
border:1px #666666 solid;
}
#right_content_detail h4{
padding-left:10px;
color:#363430;
margin-top:5px;
}
.post{
color:#000;
text-decoration:none;
margin-left:10px;
}
#right_content_detail p{
margin-top:-12px;
padding-left:5px;
padding-right:5px;
color:#363430;
font-size:14px;
text-align:justify;
}
#right_content_detail ul{
margin:0px;
padding:0px;
}
#right_content_detail ul li{
float:left;
display:block;v
}
#right_content_detail ul li a{
font-size:17px;
margin-top:5px;
text-decoration:none;
display:block;
color:#363430;
width:200px;
padding-left:10px;
margin-top:8px;
}
#right_content_detail ul li a:hover{
text-decoration:underline;
}
.read_more_link a{
color:#740a07;
font-size:15px;
text-decoration:none;
float:right;
font-weight:bold;
padding-right:10px;
padding-top:5px;
}
.read_more_link a:hover{
text-decoration:underline;
}
.line_bg{
width:600px;
float:left;
margin-top:10px;
}
#footer_bg{
width:900px;
float:left;
margin:auto;
background-color:#2e6a92;
}
#footer{
width:880px;
height:74px;
float:none;
margin:auto;
}
#footer_menu{
width:630px;
height:74px;
float:left;
margin:auto;
}
#footer_menu ul{
margin:0;
padding:0;
list-style:none;
}
#footer_menu ul li{
list-style:none;
float:left;
}
#footer_menu ul li a{
width:100px;
height:23px;
font-size:18px;
display:block;
color:#ffffff;
padding-top: 25px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-align:left;
text-decoration:none;
}
#footer_menu ul li a:hover{
text-decoration:underline;
}
#footer_link{
width:250px;
height:74px;
float:right;
margin:auto;
}
.footer_table{
float:right;
border:none;
margin-top:45px;
}
.footer_td{
color:#FFFFFF;
font-size:16px;
}
.link a{
color:#FFFFFF;
text-decoration:none;
}
.link a:hover{
text-decoration:underline;
}
Do you have any cache plugin installed? I had the same issue where my website wouldn't update. I later found out it was a WP SuperCache plugin issue.
Related
Can't get padding, margin, or line-spacing to work on any UL/LI/ or A tags in CSS.
Keep in mind, I have a CSS reset stylesheet setup before loading all other style sheets.
Here is my HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x125/000/fff"></div>
<div class="h_navbar">
<nav>
<ul>
<li>Home</li>
<li>Web Design</li>
<li>Advertising</li>
<li>Publishing</li>
</ul>
</nav>
</div>
CSS:
.h_logo{
width:800px;
height:125px;
margin:auto;
display:block;
clear:both;
}
.h_nabar{
width:1000px;
height:125px;
padding:10px;
}
.h_navbar li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:100px;
height:50px;
text-align:center;
}
.h_navbar ul{
display:table;
margin:auto;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
border:2px double black;
font-size:18px;
}
JSFiddle
CSS
.h_logo{
width:800px;
height:125px;
margin:auto;
display:block;
clear:both;
}
.h_nabar{
width:1000px;
height:125px;
padding:10px;
}
.h_navbar li{
list-style-type:none;
display:inline-block;
vertical-align:middle;
width:120px;
height:50px;
text-align:center;
border:1px solid #111;
}
.h_navbar ul{
display:block;
margin:auto;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
font-size:18px;
vertical-align:middle;
margin:15px;/*Adjust your margin here*/
width:120px;
height:50px;
}
HTML
Home
Web Design
Advertising
Publishing
html
<footer>
<div class="Footer_Container">
<div class="Footer_Rows">
<div class="span3" id="sspan1">
<h5>CONTACT</h5>
<ul>
<li>chris#pagemotion.com</li>
<li>(03) 013 3134114</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan2">
<h5>FOLLOW</h5>
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan3">
<h5>VISIT</h5>
<ul>
<li>6700 N New York Ave Suite 233 Portland, OR 97203</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan4">
<img src="Image/mylogo.png" class="mylogo">
<!-- <img src="Image/rdio-icon.png" class="sg"> -->
</div><!--end of span-->
</div><!--end of FooterRows-->
</div><!--end of FooterContainer-->
css
footer{
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container{
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows{
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3{
width:16%;
position:relative;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5{
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul{
margin:0;
padding:0;
list-style:none;
}
.span3 ul li{
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a{
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
#sspan1{
margin-left:10px;
}
#sspan4{
margin-left:10px;
}
.mylogo{
width:150px;
height:100px;
}
please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?
so is like this:
A B
C D
thank ~
Are you looking for something like this?
http://jsfiddle.net/62uzV/
.span3{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
footer {
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container {
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows {
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3 {
width:50%;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5 {
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul {
margin:0;
padding:0;
list-style:none;
}
.span3 ul li {
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a {
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
.mylogo {
width:150px;
height:100px;
}
I have spent hours figuring out why my .clearfix does not properly push the parent element of h2 to fit the contents of inner tags.
I am sure I am missing something somewhere. Here is my CSS:
#epm-social-stream {
width:100%;
font-family:"Open Sans Regular",Helvetica,Arial!important;
color:#555;
}
#epm-social-stream .clearfix:after {
content:".";
visibility:hidden;
display:block;
height:0;
clear:both;
}
#epm-social-stream .btn-sm {
font-size:12px;
line-height:1.5;
padding:5px 10px;
}
#epm-social-stream .btn-default {
background-color:#fff;
color:#444;
border-color:#ccc;
}
#epm-social-stream .btn {
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
display:inline-block;
font-size:14px;
line-height:1.42857;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
padding:6px 12px;
}
#epm-social-stream h1,#epm-social-stream h2 {
font-family:"Open Sans Regular",Helvetica,Arial!important;
}
#epm-social-stream a {
cursor:pointer;
color:#0090ca;
text-decoration:none;
}
#epm-social-stream a:hover {
color:#0090ca;
text-decoration:underline;
}
#epm-social-stream ul {
list-style:none;
margin:0;
padding:0;
}
#epm-social-stream .epm-se-has-tooltip {
cursor:pointer;
}
#epm-social-stream div.epm-show-older {
cursor:pointer;
color:#ccc;
font-size:11px;
margin:5px 0 5px 50px;
}
#epm-social-stream div.epm-show-older:before {
content:"•••";
margin-right:5px;
position:relative;
top:1px;
}
#epm-social-stream div#epm-se-no-activity {
color:#ccc;
font-family:"Open Sans Light",Helvetica,Arial;
font-size:20px;
text-align:center;
display:none;
margin:0 auto;
}
#epm-social-stream li.epm-se-thread {
margin-bottom:20px;
}
#epm-social-stream li.epm-se-thread .epm-se-user-info a {
color:#555;
font-family:"Open Sans Semi Bold",Helvetica,Arial;
}
#epm-social-stream li.epm-se-thread div.epm-se-user-avatar {
float:left;
width:40px;
height:40px;
background-image:url(/_layouts/15/epmlive/images/default-avatar.png);
background-repeat:no-repeat;
-moz-background-size:40px auto;
-o-background-size:40px auto;
-webkit-background-size:40px auto;
background-size:40px auto;
margin-right:10px;
border-radius:50%;
}
#epm-social-stream li.epm-se-thread div.epm-se-user-avatar img {
width:40px;
height:40px;
border-radius:50%;
border:0 none;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info {
float:left;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
height:40px;
line-height:40px;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span {
margin-right:10px;
}
#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
font-size:14px;
}
#epm-social-stream li.epm-se-thread span.epm-se-object-info {
display:inline-block;
height:40px;
line-height:40px;
}
#epm-social-stream li.epm-se-thread span.epm-se-object-info a:hover {
text-decoration:none;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time,#epm-social-stream li.epm-se-thread span.epm-se-object-info {
color:#ccc;
font-size:11px;
margin-left:10px;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time span.epm-se-workspace:after,#epm-social-stream li.epm-se-thread span.epm-se-object-info span.epm-se-workspace:after {
content:"|";
margin-left:4px;
position:relative;
top:-1px;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity {
margin:2px 0;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity span {
display:inline-block;
height:20px;
line-height:20px;
}
#epm-social-stream li.epm-se-thread li.epm-se-activity span.epm-se-activity-icon {
width:40px;
margin-right:5px;
text-align:right;
font-size:10px;
color:#999;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments {
background-color:#f7f7f7;
border-radius:5px;
margin-left:25px;
margin-top:8px;
padding:5px 5px 5px 10px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-show-older {
margin-bottom:10px;
margin-left:15px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar {
width:30px;
height:30px;
-moz-background-size:30px auto;
-o-background-size:30px auto;
-webkit-background-size:30px auto;
background-size:30px auto;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAABQVBMVEUAkMoBkMoCkcoAjskAjMgFkssAj8oBkcpnvd++4/LW7fa/4/Jsv+ECkcsEkst9x+R4xOMAjckBj8oAi8gqo9Ps9/vb7/cUmM4+q9fm9Poro9Pu9/vY7vcmodIDkcsAjcheud30+v1Hr9kAisdlvN9JsNkendDQ6/W64fAPlc15xeNZtt0AiccAj8kBjskmodLa7/fE5fIZm88Bj8kEkcqr2u2NzecAi8cDksswpdTQ6vW+4/EmoNIDkcpCrdib0+rk8/ng8vmW0epDrdg6qdax3e/1+/3x+fyy3u8AjckCkMpLsNnp9frr9/tQs9sFkcsVmc7T7PbZ7vcZm9Bat91gud4AiMZ6xeP7/f7y+fzz+v3x+fx+x+QAh8YFkssxpdQbnNAnodIUmc7////+///9/v/8/v77/f7+/v/9/v75/P6hsBPiAAAAY3RSTlPm5ubm5efm5vD4+/jw5uby8eXm5er9++js/Or9++nm5e/+7OXv7en6+Ofx7uXm5ur7+ejm5vbz5ebq+vjp5uz0/Pz07Ov3/v735ubt/f3t5uj6++ju7+Tx/v3+/fLk5urp6eiKNt80AAABHUlEQVR4Xu2R11LCQBhGt5nYEg1BQRQQsQvYe++9916+TQK+/wM4GYcZEljunfFcn/l2/rPk70MZ0Qij9SVBGojQ6q1EZhqbmltazyNU7fA2CQDtaV2l6Fa0A6500TnFVUNMbH9LQMquqKUrd967IVFEz4dyJ2X3uvDZ6xNM5WT78cuA0qF8cAgOHAyPaMrjWXYUjpTO2LxBlE5hfAIeJmPTTJnQpHwWHuZyCymqWCHCWlyCi+UVSxBWu+Dq2voGfDa34qzWZcza2c2gzP5B/PCoqnH6+AQoSfgUS8DpWfhjaf7iEp4jyzgerq65Hkp8gzC3OTPgmHf3D49PmQqevZfXt9BbsUTys5Jk4isfjsRtEcTm1ZENFsSg5B/yA5SrSKpfw4TxAAAAAElFTkSuQmCC);
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar img {
width:30px;
height:30px;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment {
margin:5px 0;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-user,#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-comment-details {
display:table-cell;
float:none;
vertical-align:top;
}
#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-comment-text {
color:#777;
}
#epm-social-stream div.epm-se-comment-box {
margin:15px 0 0 25px;
}
#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input {
border:1px solid #eee;
border-radius:3px;
margin-bottom:10px;
min-height:20px;
padding:7px 10px;
}
#epm-social-stream div.epm-se-comment-box button {
float:right;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
background-color:#fff;
color:#444;
font-size:12px;
line-height:1.5;
display:none;
border-color:#ccc;
padding:5px 10px;
}
#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-expanded {
min-height:75px;
}
#epm-social-stream div#epm-se-status-update-box {
display:none;
margin:0 0 20px;
}
#epm-social-stream div#epm-se-status-update-box div.epm-se-comment-input {
border:1px solid #ccc;
}
#epm-social-stream .btn-primary,#epm-social-stream div.epm-se-comment-box button.epm-se-active {
background-color:#0090ca;
color:#fff;
border-color:#357ebd;
}
#epm-social-stream a h2,#epm-social-stream a:hover h2 {
color:#0090ca;
}
#epm-social-stream .epm-se-hidden,#epm-social-stream div#epm-se-pagination span,#epm-social-stream li.epm-se-thread ul.epm-se-older-activities,#epm-social-stream li.epm-se-thread ul.epm-se-older-comments {
display:none;
}
#epm-social-stream li.epm-se-thread span.epm-se-activity-time a,#epm-social-stream li.epm-se-thread span.epm-se-object-info a,#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-placeholder {
color:#ccc;
}
Here is my HTML:
<div id="epm-social-stream" style="visibility: visible; display: block;">
<ul id="epm-se-threads">
<li class="epm-se-thread clearfix" id="epm-se-thread-30b23238-90b2-4337-887a-acac6366bde1">
<div class="epm-se-thread-header clearfix">
<div class="epm-se-user-avatar">
<img src="http://moon.epmlivedev.com/sites/epm56/User Profile Pictures/mpatel.png">
</div>
<div class="epm-se-thread-info clearfix">
<span class="epm-se-thread-icon icon-bubble-12"></span>
<h2>
Multi-line<br>comment<br>test<br>
</h2>
</div>
<span class="epm-se-object-info">
</span>
</div>
<ul class="epm-se-activities">
<li class="epm-se-activity clearfix" id="epm-se-activity-3b9b7112-05c4-4328-88c6-a180b3a4c143">
<span class="epm-se-activity-icon icon-bubble-12"></span>
<span class="epm-se-user-info">
<a class="epm-se-link" target="_blank" href="/sites/epm56/_layouts/15/userdisp.aspx?ID=17">You</a>
</span>
<span class="epm-se-activity-info">made a comment</span>
<span data-placement="top" data-toggle="tooltip" title="Tuesday, April 8 2014 2:46 PM" class="epm-se-activity-time epm-se-has-tooltip">Today Apr 8</span>
</li>
</ul>
<ul class="epm-se-older-activities"></ul>
<div class="epm-se-comments epm-se-hidden">
<ul class="epm-se-older-comments"></ul>
<ul class="epm-se-comments"></ul>
<ul class="epm-se-latest-comments"></ul>
</div>
<div data-threadid="30b23238-90b2-4337-887a-acac6366bde1" class="epm-se-comment-box">
<div contenteditable="true" class="epm-se-comment-input epm-se-placeholder">Add a comment...</div>
<button id="epm-se-comment-post-30b23238-90b2-4337-887a-acac6366bde1">Post</button>
</div>
</li>
</ul>
</div>
Here is a JS Fiddle.
You just need to remove the height: 40px from the h2 to allow it to extend to whatever height necessary.
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2
currently fixes the height of h2 to 40px, any overflow is shown outside the h2 area, unless you add overflow:hidden;.
If you want it all shown either remove height or change it to min-height.
#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
min-height:40px;
line-height:40px;
}
I hope that helps.
I am building a navigation bar. This is what the HTML looks like
<div class="navhead">TEXT</div>
<div class="navcontainer">
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
</div>
And this is what the CSS looks like.
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
height:60px;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
}
.button {
width:20%;
height:60px;
float:left;
background-color:#FFF;
color:#000;
text-align:center;
vertical-align:central;
line-height:60px;
transition:background-color 1.5s ease;
margin:0px;
padding:0px;
}
.button:hover {
width:20%;
height:60px;
float:left;
background-color:#000;
color:#FFF;
text-align:center;
vertical-align:central;
line-height:60px;
margin:0px;
padding:0px;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
The problem I am having is that the last button to the right isn't flush with the browser window. I don't really know what I'm doing wrong. I added everything I thought I needed to the "body" class, but still there's space... I mean, there's no space on top of it, just to the right of the last button.
jsfiddle here
This is a better way to structure your HTML and a more reliable way to create that menu: http://codepen.io/pageaffairs/pen/xaGuq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
list-style: none;
display: table;
table-layout: fixed;
}
.navcontainer li {display: table-cell;}
.navcontainer li a {line-height: 60px;
background-color:#FFF;
color:#000;
text-align:center;
transition:background-color 1.5s ease;
display: block;
text-decoration: none;
}
.navcontainer li a:hover {
background-color:#000;
color:#FFF;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
</style>
</head>
<body>
<div class="navhead">TEXT</div>
<ul class="navcontainer">
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
</ul>
</body>
</html>
On further investigation I have discovered that there is something in my CSS that is making my navigation display funny -> Everything on my innerPage and HTML below (Main Page) load fine but I am still being driven crazy by the nav so I have uploaded my full html and css to resolve this issue,
HTML:
<div id="container">
<header>
<h1>company</h1>
<div id="logo">Home</div>
<section id="sales">
<p></p>
</section>
<section id="searchBox">
<form id="searchBoxForm">
<fieldset>
<input type="text" name="search" id="search" placeholder="Search Here" />
<input class="submit" type="submit" name="submit" id="submit" value="Search" />
</fieldset>
</form>
</section>
</header><!-- Header End -->
<nav id="mainMenu">
<ul>
<li>Nav 1
<ul><!--Sub Menu Hosting -->
<li>Drop Down 1</li>
</ul><!-- Sub Menu Hosting Ends -->
</li>
<li>Nav 2
<ul><!-- Sub Menu Email -->
<li>I want my own email</li>
</ul><!-- Sub Menu Email Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu Support -->
<li>Need Support?</li>
</ul><!-- Sub Menu Support Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu About -->
<li>About</li>
</ul><!-- Sub Menu About Ends -->
</li>
<li><a class="signup" href="#">SIGN UP</a></li>
</ul>
</nav><!-- Main Menu End -->
<div id="billboard">
<h1 contenteditable="true">Cloud Hosting </h1>
<p>Hosting to take you way above the clouds</p>
</div>
<article id="services">
<section class="service1">
<h2>Plan 1</h2>
<p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p>
<p>More</p>
</section>
<section class="service2">
<h2>Plan 2</h2>
<p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p>
<p>More</p>
</section>
<section class="service3">
<h2>Plan 3</h2>
<p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p>
<p>More</p>
</section>
<section class="service4">
<h2>MS Exchange</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
<section class="service5">
<h2>Domains</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
</article><!-- Services End -->
<div id="servicesBanner">
<p>Services: </p>
</div>
<ul id="nav-footer">
<div id="col">
</div>
<p>©</p>
</div> <!-- container -->
</body>
</html>
CSS:
body {
line-height:1;
font:12px normal helvetica,arial,sans-serif;
color:gray;
background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
h1 {
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#58585a;
font-weight:700;
}
h2 {
padding-bottom:9px;
border-bottom:1px solid #e5e5e5;
font-size:18px;
line-height:30px;
color:#58585a;
font-weight:700;
margin:40px 0 10px;
}
h3 {
margin-bottom:3px;
font-size:14px;
line-height:20px;
color:#58585a;
font-weight:700;
}
h4 {
font-size:12px;
font-weight:700;
color:#58585a;
line-height:20px;
}
ol {
list-style:decimal;
margin:0 0 20px 16px;
}
strong {
color:#4a4a4a;
}
.subheading {
margin-bottom:40px;
font-size:16px;
line-height:24px;
}
h1.small {
font-size:26px;
line-height:36px;
}
#container {
width:960px;
margin:0 auto;
padding:0 0 40px;
}
pre {
border-left:2px solid #00afd8;
background:url(/assets/img/pre-bg.png);
font-size:12px;
line-height:20px;
width:620px;
overflow:auto;
overflow-y:hidden;
margin:0;
padding:0;
}
code {
display:block;
margin:0 0 0 10px;
}
header{
z-index:100;
margin-bottom:-30px;
width:100%;
height:100px;
}
header h1{
font-family: 'Springsteel Lig', arial, serif;
}
h1#logo,#logo a {
display:block;
left:0;
top:30px;
text-indent:-99999px;
width:193px;
height:41px;
margin:0;
}
/* Main Menu */
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu .signup:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:115px;
top:50px;
right:-37px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:152px;
height:30px;
font-weight:bold;
margin-left:-38px;
line-height:35px;
}
footer{
clear:both;
border-top: 1px solid #d3d3d3;
width:100%;
height:50px;
}
#sales {
width:160px;
height:30px;
float:right;
margin-top:-140px;
margin-right:215px;
}
/*Sales */
#sales p{
font-weight:bold;
text-align:center;
line-height:45px;
}
/*Search Bpx */
#searchBox{
float:right;
margin-top:-125px;
}
#searchBoxForm{
margin-top:10px;
}
#searchBoxForm .search {
font-size: 11px;
color: #fff;
padding: 6px;
border: 1px solid #b8b8b8;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit {
background-color:#00afd8;
width: 67px;
height: 26px;
border: none;
color: #fff;
cursor: pointer;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
background-color:#00afd8;
}
/* Billboard */
#billboard {
min-height:240px;
background:#00afd8;
font-size:16px;
line-height:24px;
color:#fff;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
padding:34px 520px 60px 40px;
}
#billboard h1 {
font-family:arial;
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#fff;
}
#billboard a {
color:#fff;
text-decoration:underline;
}
#services {
background-color:#fff;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
}
#services a{
text-decoration:none;
}
#services h2 {
position:relative;
border:0;
background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
margin:-40px 0 3px;
padding:0;
}
#services h2 a {
display:block;
color:#58585a;
padding:94px 0 0;
}
#services .service1 {
padding-left:20px;
border-left:0;
}
#services .service2 h2 {
background-position:-168px 0;
}
#services .service3 h2 {
background-position:-336px 0;
}
#services .service4 h2 {
background-position:-504px 0;
}
#services .service5 h2 {
background-position:-672px 0;
}
#services .service1,.service2,.service3,.service4,.service5{
float:left;
background-color:#fff;
border-left:1px solid #e5e5e5;
width:154px;
height:100%;
padding:0 18px 0 19px;
margin-bottom:10px;
}
#services img{
height:100px;
width:100px;
margin:0 auto;
}
#servicesBanner{
clear:both;
width:100%;
height:90px;
margin:15px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#servicesBanner p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Nav Content */
.subNavHeading{
color:#fff;
padding-top:10px;
margin:9px 0 15px 45px;
}
/*Inner Page CSS */
#innerPageLeftCol{
float:right;
width:220px;
min-height:100%;
margin:-10px 0 10px 0;
}
#innerPageContent{
background-color:#fff;
float:left;
width:720px;
min-height:100%;
margin-bottom:10px;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne{
background:url(../images/sidebarBox.png) no-repeat;
width:220px;
height:100%;
min-height:100%;
margin:10px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne li{
margin:5px 0 0 0;
padding-top:5px;
}
.boxOne a{
text-decoration: none;
color:#00afd8;
}
.boxTwo{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxThree{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 5px 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
#innerPageContent h1{
margin:30px;
}
#innerPageContent .innerPageSubHeading{
display:block;
font-size:16px;
margin:30px;
width:450px;
}
#innerPage .separator{
margin-top:20px;
padding-top:20px;
}
#innerPageContent p{
margin:30px;
}
#innerPageContent img{
float:right;
width:175px;
height:175px;
margin:30px;
padding:3px;
}
/*Packages Template */
#packageContainer{
width:320px;
list-style:none;
font-size:14px;
color:#000;
margin:0 auto;
}
#packageContainer .leftCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .leftCol li{
height:15px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
#packageContainer .rightCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .rightCol li{
height:15px;
text-indent:8px;
border-bottom:1px solid #ccc;
}
#packageContainer .orderButton{
float:left;
margin:0px 20px 20px 65px;
background:#00afd8;
font-family:Helvetica,arial,sans-serif;
font-size:12px;
color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 5px;
}
#innerPageProducts{
clear:both;
width:100%;
height:90px;
margin:10px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#innerPageProducts p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Footer */
#nav-footer{
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
border-top: 1px solid lightGrey;
list-style: none;
font-size: 11px;
}
#nav-footer #col{
margin: 0 auto;
display:inline-block;
width:215px;
}
#nav-footer li{
margin:10px 0 0 -10px;
text-align:left;
}
#nav-footer li a{
text-decoration:none;
}
#nav-footer ul{
list-style:none;
}
#nav-footer .first{
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
My menu seems to align fine in Chrome but when I open it in Firefox 5 I get why?
Answer 1:
I have tested on another computer in firefox 3.6 and get:
HTML:
<nav id="mainMenu">
<ul>
<li class="first">
Domains
<ul>
<li class="first">
Transfer my Domain
</li>
<li class="last">
Get A Domain Name
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Hosting
<ul>
<li class="first">
Website Hosting
</li>
<li class="">
Hosted CRM
</li>
<li class="last">
Transfer to HostOne
</li>
</ul>
</li>
</ul>
<ul>
<li class="has_current">
Email
<ul>
<li class="first">
Personal E-Mail
</li>
<li class="">
Business Email
</li>
<li class="last current">
Microsoft Hosted Exchange
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Support
</li>
</ul>
<ul>
<li class="signup last">
SIGN UP
</li>
</ul>
</nav><!-- Main Menu End -->
CSS:
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup a{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu li .signup a:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:135px;
top:50px;
right:-55px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:170px;
height:30px;
font-weight:bold;
margin-left:-35px;
line-height:35px;
}
OK, I didn't see exactly what you were seeing, but I did see that it was a bit messed up in FF. I made some changes to a couple of your CSS statements, and it was working in Chrome and FF. Here is what I did:
Changed "#mainMenu ul li" removed "display: inline;" added "float: left; list-style: none;"
#mainMenu ul li
{
margin-left:0px;
width:120px;
height:56px;
position:relative;
float: left;
list-style: none;
}
Added "#mainMenu .signup" with a "float: right;"
#mainMenu .signup
{
float: right;
}
Removed "margin-left: 360px;" from "#mainMenu .signup a"
#mainMenu .signup a
{
background-color:#69c21c;
height:50px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
Now since I am using floats in your nav bar you will probably want to put a clear div after the closing nav tag to clear the floats and start a new div normally.
<div style="clear: both;"> </div>