...

View Full Version : css text aligment issues



LUCKNUGG
09-15-2011, 08: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, 09: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, 10:31 PM
/* =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, 02: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, 02: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, 02:18 AM
like on this page for instancehttp://www.babybrezza.com/about.php

teedoff
09-16-2011, 02:28 AM
Remove the part in orange:


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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum