css text aligment issues

LUCKNUGG · 09-15-2011, 07:30 PM

http://www.babybrezza.com/about.phpI have a css question,

http://www.babybrezza.com/Feeding_guide.php\

Do you know why the bold font is appearing aligned below the regular font? its a css thing but I cant figure it out , I attached it incase its a quickfix

if so can you let me know whats wrong with the code?

here is the css below

/* =Reset default browser CSS
-------------------------------------------------------------- */
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, strong, sub, sup, tt, var, b, i, dl, dt, dd, object, ol, ul, li, form, label, legend, span, table, caption, tbody, tfoot, thead, tr, th, td {
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
border: 0;
margin: 0;
padding: 0;
vertical-align: middle;
}

ol, ul {
list-style-type: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

em, address, big, strong, cite, code, tt, var {
font-style: normal;
}

a {
text-decoration: none;
}

/* Standard HTML Tag Definition
-------------------------------------------------------------- */
body,
form, input, select, textarea, fieldset, button {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: normal;
}

html {

}

body {
background-image: url('../images/bg.jpg');
background-repeat: repeat-x;
background-color: #f8f8f9;
}

/* =Custom Classes
-------------------------------------------------------------- */
.clear {
clear: both;
}

/* =Layout
-------------------------------------------------------------- */
#wrapper {
width: 100%;
}

/* =Header
-------------------------------------------------------------- */
#header {
width: 1018px;
margin: 0 auto;
padding: 12px 0 0 0;
position: relative;
}

#header .list_one {
float: right;
margin: 0 0 28px 0;
}

#wrapper ul li {
float: left;
}

#header .list_one li {
margin: 0 0 0 20px;
display: inline;
color: #f0f0f1;
}

#header .list_one li p {
float: left;
color: #f68d1d;
line-height: 18px;
}

#header .list_one li p em {
color: #8cc63e;
padding: 0 15px 0 0;
}

#header .list_one li select {
width: 109px;
float: left;
}

#header .box_logo {
float: left;
padding: 45px 0 10px 40px;
}

#header .list_two {
padding: 0px 1px 0 0px;
float: right;
width: 493px;
position: absolute;
right: 0;
bottom: -3px;
}

#header .list_two li {
margin: 0px;
padding: 0px;
display: inline;
height: 46px;
width: 123px;
text-align: center;
position: relative;
z-index: 99999999;
}

#header .list_two li.list-item-one {
margin-left: 0;
}

#header .list_two li:hover, #header .list_two li.current {
background-image: url('../images/nav_li_bg.png');
background-position: bottom left;
}
#header .list_two li:hover a, #header .list_two li.current a {
background-image: url('../images/nav_li_bg.png');
background-position: bottom left;
color: #8CC63E;
}
#header .list_two li a {
width: 123px;
padding: 16px 0px 0 0px;
margin: 0px;
display: inline;
height: 30px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #f08009;
text-align: center;
}

#header .list_two ul {
top: 46px;
left: 0;
padding: 10px 5px 5px;
background-color: #F0F0F2;
position: absolute;
z-index: 9999;
display: none;
float: left;
}

#header .list_two li li {
height: 22px;
width: auto;
clear: both;
}

#header .list_two li a span {
display: block;
}
#header .list_two li:hover li a {
width: 160px;
height: 22px;
line-height: 22px;
font-weight: normal;
padding: 0 8px 0 5px;
background-image: url('../images/nav_li_bg.jpg');
background-position: top left;
background-repeat: repeat-x;
font-size: 10px;
text-align: left;
color: #989898;
white-space: nowrap;
}
#header .list_two li li a:hover {
color: #eb800e;
}
#header .list_two li li.active a {
color: #eb800e;
}

#header .list_two li .sub-menu li a {
width: 110px;
}

/* =Main
-------------------------------------------------------------- */
#main {
width: 100%;
margin: 0 auto;
padding: 0 0 39px 0;
background-image: url('../images/bo_01.png');
background-position: bottom center;

}

#main .content {
width: 1018px;
padding: 30px 0 0 0;
margin: 0 auto;
background-image: url('../images/co_02.png');
background-position: 14px 0px;
}

#main .content_box_top {
width: 966px;
margin: 0 auto 0 25px;
background-image: url('../images/box_repeat.jpg');
background-repeat: repeat-y;
display: inline;
float: left;
}

#main .sub {
height: 1000px;
}

#main .box_left {
width: 470px;
margin: 0px;
padding: 0 0 0 0px;
float: left;
}

#main .box_right {
width: 483px;
padding: 0px;
float: left;
}

.content h2 {
float: left;
font-family: Century Gothic;
color: #ccc;
font-weight: normal;
margin: 15px 0px 0px 16px;
display: inline;
}

.content h2.heading_more {
margin: 0;
}

.content .box_right h2 , .content .box_right p , .content .box_right h3, .content .box_right a {
clear: both;
float: left;
margin-left: 30px;
display: inline;
}

.content .box_right p {
color: #2ea8ed;
padding: 0 0 8px 0;
}

.content .box_right a {
margin: 25px 0 9px 30px;
}

.content h3 {
margin: 8px 0 5px 16px;
padding: 0 0 10px 0;
font-family: Century Gothic;
color: #d3d3d3;
font-weight: normal;
line-height: normal;
display: inline;
}

.content .box_left h3 {
padding: 0px 0 5px 0;
clear: both;
float: left;
}

.content p {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: normal;
}

.content .box_left p {
padding: 0 0 8px 0;
}

.content a {
color: #F78F1C;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 124px;
height: 0px;
margin: 0px;
padding: 0px;
font-weight: bold;

}

.content .box_image {
width: 921px;
margin: 0 auto;
border-bottom: solid 1px #e5e9ea;
}

.content form {
width: 921px;
padding: 30px 0 0 0;
margin: 0 auto;
}

.content form textarea{
width: 921px;
height: 280px;
margin: 15px 0 0 0;
border: solid 1px #e5e9ea;
overflow: hidden;
resize: none;
}

#bottom_content {
width: 979px;
margin: 0 auto;
padding: 7px 0 33px 25px;
}

#bottom_content .box_one, #bottom_content .box_two, #bottom_content .box_three {
width: 319px;
height: 273px;
margin: 0 5px 0 0;
padding: 15px 0 0 0;
float: left;
text-align: center;
display: inline;
}

#bottom_content .box_one {
background-image: url('../images/box_one.jpg');
}

#bottom_content .box_two {
background-image: url('../images/box_two.jpg');
}

#bottom_content .box_three {
background-image: url('../images/box_three.jpg');
}

#bottom_content h2 {
margin: 5px 0 10px 0;
font-family: Century Gothic;
font-size: 36px;
font-weight: normal;
color: #999;
text-align: center;
}

#bottom_content p {
margin: 0 0 3px 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #0099CC;
text-align: center;
}

#bottom_content a {
width: 126px;
height: 44px;
margin: 0 auto;
padding: 0;
display: block;
color: #fff;
font-family: Century Gothic;
font-size: 16px;
}

#bottom_content .box_one a {
margin-top: 0px;
}

#bottom_content img.videos {
margin: 15px 0 1px 0;
}

#bottom_menu {
width: 969px;
margin: 0px auto 0;
padding: 0px 0 71px 10px;
background-image: url('../images/border_bg01.jpg');
background-position: top right;

}

#bottom_menu .third_label_menu {
float: left;
padding-top: 30px;
}

#bottom_menu .third_label_menu li {
margin: 0 30px 0 0;
padding: 0;
}

#bottom_menu .third_label_menu li a {
font-size: 11px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #F78F1E;
float: left;
padding: 3px 0 5px 30px;
}

#bottom_menu .third_label_menu li.list_item_one {
background-image: url('../images/about_bg.png');
}

#bottom_menu .third_label_menu li.list_item_two {
background-image: url('../images/newsletter_bg.png');
}

#bottom_menu .third_label_menu li.list_item_three {
background-image: url('../images/press_testimonals_bg.png');
}

#bottom_menu .third_label_menu li.list_item_four {
background-image: url('../images/where.png');
}

#bottom_menu .third_label_menu li.list_item_five {
background-image: url('../images/contact.png');
}

#bottom_menu .right_label_menu {
float: right;
padding: 25px 0 0 0;
}

#bottom_menu .right_label_menu li {
margin: 0 10px 0 0;
}

/* =Footer
-------------------------------------------------------------- */
#footer {
width: 100%;
height: 40px;
padding: 25px 0 0 0;
background-image: url('../images/footer_bg.jpg');
background-repeat: repeat-x;
}

#footer .sub_footer {
width: 1005px;
margin: 0 auto;
font-size: 12px;
}

#footer .sub_footer p {
padding: 0 0 0 20px;
color: #999999;
font-size: 12px;
}

#footer .sub_footer ul {
float: right;
}

#footer .sub_footer ul li {
padding: 0 5px 0 0;
float: left;
color: #CCCCCC;
}

#footer .sub_footer ul li a {
margin: 0 5px 0 0;
color: #999999;
display: inline;
}

#wrapper img,#main,#main .content, #header ul li:hover ,#header ul li:hover a,#header ul li.current,
#header ul li.current a,#bottom_menu ul li {
behavior: url('iepngfix/iepngfix.htc');
}

teedoff · 09-15-2011, 08:38 PM

Please when posting code, use the code tag (# button) to wrap your code.

But, if you provide a link, you really dont need to post your code.

Now, if you mean why is some of the text in the paragraph bold and some not, there is a <strong> tag wrapping that bit of text IN your html markup.

If this isn't what you were referring to, please explain your issue in more detail.

LUCKNUGG · 09-15-2011, 09:31 PM

Code:

/* =Reset default browser CSS
-------------------------------------------------------------- */
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, strong, sub, sup, tt, var, b, i, dl, dt, dd, object, ol, ul, li, form, label, legend, span, table, caption, tbody, tfoot, thead, tr, th, td {
	background-color: transparent;
	background-position: top left;
	background-repeat: no-repeat;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

ol, ul {
	list-style-type: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

em, address, big, strong, cite, code, tt, var {
	font-style: normal;
}

a {
	text-decoration: none;
}

/* Standard HTML Tag Definition 
-------------------------------------------------------------- */
body,
form, input, select, textarea, fieldset, button {
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

html {
	
}

body {
	background-image: url('../images/bg.jpg');
	background-repeat: repeat-x;
	background-color: #f8f8f9;
}

/* =Custom Classes
-------------------------------------------------------------- */
.clear {
	clear: both;
}

/* =Layout
-------------------------------------------------------------- */
#wrapper {
	width: 100%;
}

/* =Header
-------------------------------------------------------------- */
#header {
	width: 1018px;
	margin: 0 auto;
	padding: 12px 0 0 0;
	position: relative;
}

#header .list_one {
	float: right;
	margin: 0 0 28px 0;
}

#wrapper  ul li {
	float: left;
}

#header .list_one li  {
	margin: 0 0 0 20px;
	display: inline;
	color: #f0f0f1;
}

#header .list_one li p {
	float: left;
	color: #f68d1d;
	line-height: 18px;
}

#header .list_one li p em {
	color: #8cc63e;
	padding: 0 15px 0 0;
}

#header .list_one li select {
	width: 109px;
	float: left;
}

#header .box_logo {
	float: left;
	padding: 45px 0 10px 40px;
}

#header .list_two {
	padding: 0px 1px 0 0px;
	float: right;
	width: 493px;
	position: absolute;
	right: 0;
	bottom: -3px;
}

#header .list_two li {
	margin: 0px;
	padding: 0px;
	display: inline;
	height: 46px;
	width: 123px;
	text-align: center;
	position: relative;
	z-index: 99999999;
}

#header .list_two li.list-item-one {
	margin-left: 0;
}

#header .list_two li:hover, #header .list_two li.current {
	background-image: url('../images/nav_li_bg.png');
	background-position: bottom left;
}
#header .list_two li:hover a, #header .list_two li.current a {
	background-image: url('../images/nav_li_bg.png');
	background-position: bottom left;
	color: #8CC63E;
}
#header .list_two li a {
	width: 123px;
	padding: 16px 0px 0 0px;
	margin: 0px;
	display: inline;
	height: 30px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #f08009;
	text-align: center;
}

#header .list_two ul {
	top: 46px;
	left: 0;
	padding: 10px 5px 5px;
	background-color: #F0F0F2;
	position: absolute;
	z-index: 9999;
	display: none; 
	float: left;
}

#header .list_two li li {
	height: 22px;
	width: auto;
	clear: both;
}

#header .list_two li a span {
	display: block;
}
#header .list_two li:hover li a {
	width: 160px;
	height: 22px;
	line-height: 22px;
	font-weight: normal;
	padding: 0 8px 0 5px;
	background-image: url('../images/nav_li_bg.jpg');
	background-position: top left;
	background-repeat: repeat-x;
	font-size: 10px;
	text-align: left;
	color: #989898;
	white-space: nowrap;
}
#header .list_two li li a:hover {
	color: #eb800e;
}
#header .list_two li li.active a {
	color: #eb800e;
}

#header .list_two li .sub-menu li a {
	width: 110px;
}

/* =Main
-------------------------------------------------------------- */
#main {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 39px 0;
	background-image: url('../images/bo_01.png');
	background-position: bottom center;

}

#main .content {
	width: 1018px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	background-image: url('../images/co_02.png');
	background-position: 14px 0px;
}

#main .content_box_top {
	width: 966px;
	margin: 0 auto 0 25px;
	background-image: url('../images/box_repeat.jpg');
	background-repeat: repeat-y;
	display: inline;
	float: left;
}

#main .sub {
	height: 1000px;
}

#main .box_left {
	width: 470px;
	margin: 0px;
	padding: 0 0 0 0px;
	float: left;
}

#main .box_right {
	width: 483px;
	padding: 0px;
	float: left;
}

.content h2 {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #ccc;
	font-weight: normal;
	margin: 15px 0px 0px 16px;
	display: inline;
}

.content h2.heading_more {
	margin: 0;
}

.content .box_right h2 , .content .box_right p , .content .box_right h3, .content .box_right a {
	clear: both;
	float: left;
	margin-left: 30px;
	display: inline;
}

.content .box_right p {
	color: #2ea8ed;
	padding: 0 0 8px 0;
}

.content .box_right a {
	margin: 25px 0 9px 30px;
}

.content h3 {
	margin: 8px 0 5px 16px;
	padding: 0 0 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #d3d3d3;
	font-weight: normal;
	line-height: normal;
	display: inline;
}

.content .box_left h3 {
	padding: 0px 0 5px 0;
	clear: both;
	float: left;
}

.content p {
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

.content .box_left p {
	padding: 0 0 8px 0;
}

.content a {
	color: #F78F1C;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	font-weight: bold;

}

.content .box_image {
	width: 921px;
	margin: 0 auto;
	border-bottom: solid 1px #e5e9ea;
}

.content form {
	width: 921px;
	padding: 30px 0 0 0;
	margin: 0 auto;
}


#bottom_content {
	width: 979px;
	margin: 0 auto;
	padding: 7px 0 33px 25px;
}

#bottom_content .box_one, #bottom_content .box_two, #bottom_content .box_three {
	width: 319px;
	height: 273px;
	margin: 0 5px 0 0;
	padding: 15px 0 0 0;
	float: left;
	text-align: center;
	display: inline;
}

#bottom_content .box_one {
	background-image: url('../images/box_one.jpg');
}

#bottom_content .box_two {
	background-image: url('../images/box_two.jpg');
}

#bottom_content .box_three {
	background-image: url('../images/box_three.jpg');
}

#bottom_content h2 {
	margin: 5px 0 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: normal;
	color: #999;
	text-align: center;
}

#bottom_content p {
	margin: 0 0 3px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	color: #0099CC;
	text-align: center;
}

#bottom_content a {
	width: 126px;
	height: 44px;
	margin: 0 auto;
	padding: 0;
	display: block;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

#bottom_content .box_one a {
	margin-top: 0px;
}

#bottom_content img.videos {
	margin: 15px 0 1px 0;
}

#bottom_menu {
	width: 969px;
	margin: 0px auto 0;
	padding: 0px 0 71px 10px;
	background-image: url('../images/border_bg01.jpg');
	background-position: top right;
	
}

#bottom_menu .third_label_menu {
	float: left;
	padding-top: 30px;
}

#bottom_menu .third_label_menu li {
	margin: 0 30px 0 0;
	padding: 0;
}

#bottom_menu .third_label_menu li a {
	font-size: 11px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #F78F1E;
	float: left;
	padding: 3px 0 5px 30px;
}

#bottom_menu .third_label_menu li.list_item_one {
	background-image: url('../images/about_bg.png');
}

#bottom_menu .third_label_menu li.list_item_two {
	background-image: url('../images/newsletter_bg.png');
}

#bottom_menu .third_label_menu li.list_item_three {
	background-image: url('../images/press_testimonals_bg.png');
}

#bottom_menu .third_label_menu li.list_item_four {
	background-image: url('../images/where.png');
}

#bottom_menu .third_label_menu li.list_item_five {
	background-image: url('../images/contact.png');
}

#bottom_menu .right_label_menu {
	float: right;
	padding: 25px 0 0 0;
}

#bottom_menu .right_label_menu li {
	margin: 0 10px 0 0;
}

/* =Footer
-------------------------------------------------------------- */
#footer {
	width: 100%;
	height: 40px;
	padding: 25px 0 0 0;
	background-image: url('../images/footer_bg.jpg');
	background-repeat: repeat-x;
}

#footer .sub_footer {
	width: 1005px;
	margin: 0 auto;
	font-size: 12px;
}

#footer .sub_footer p {
	padding: 0 0 0 20px;
	color: #999999;
	font-size: 12px;
}

#footer .sub_footer  ul {
	float: right;
}

#footer .sub_footer  ul li {
	padding: 0 5px 0 0;
	float: left;
	color: #CCCCCC;
}

#footer .sub_footer  ul li a {
	margin: 0 5px 0 0;
	color: #999999;
	display: inline;
}

#wrapper img,#main,#main .content, #header ul li:hover ,#header ul li:hover a,#header ul li.current,
#header ul li.current a,#bottom_menu ul li {
	behavior: url('iepngfix/iepngfix.htc');
}

I mean that in this page for instance below the part of the sentence is appearing to be off alignement to the non bolded text for some reason http://www.babybrezza.com/about.php
any reason why im assuming my css text attributes were not set up correctly

lankanmon · 09-16-2011, 01:09 AM

Can you specify where the text is not aligned properly? Or are you talkie about the endings of each line and how they are on in a perfect line?

LUCKNUGG · 09-16-2011, 01:18 AM

if i type a line such as

helllo this is emphasized and the rest is normal

the bolded part will appear off alignment to the non bolded text

LUCKNUGG · 09-16-2011, 01:18 AM

like on this page for instancehttp://www.babybrezza.com/about.php

teedoff · 09-16-2011, 01:28 AM

Remove the part in orange:

Code:

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, strong, sub, sup, tt, var, b, i, dl, dt, dd, object, ol, ul, li, form, label, legend, span, table, caption, tbody, tfoot, thead, tr, th, td {
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}