17 replies [Last post]
lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

Hello,

I've recently gotten an old wordpress theme (2006) from a friend who told me I could modify it. I've been trying my best being new to css and have come across a problem where due to my css (ive been told on the wordpress forums) my br and p tags are dissapearing when I edit posts and I am forced to insert them manually once again.

Also the site in general simply does not really respond the way I think I've coded it in css, especially my posts. Their layout sometimes goes off the page completely!

Could anyone just please browse the post code and see if they can find any problems I've overlooked or simply don't know about?

My site is numixes.com if you want to see what's happening. Cheers.

/*-----------Block Level Elements--------------*/

Body {
background:#000 url(images/bg_site.jpg) fixed repeat-x;
margin:0px;
padding:0px;
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#7b8787;
}

a { color:#ce5300; text-decoration:none; }
a:hover { color:#ce5300; text-decoration:underline; }

#page {
width: 900px;
margin: 0 auto;
padding:0px;
background:#fff url(images/bg.gif) repeat-y;
overflow:hidden;
}

#nav_top {
width:900px;
height:20px;
margin:0 auto;
padding-top:0px;
}

/*-- NAVIGATION --*/

ul#navigation {
float:right;
list-style:none;
margin:0px;
padding-right:10px;
font-weight:bold;
text-transform:uppercase;
height:20px;
line-height:20px;
font-size:10px;
overflow:hidden;
}

ul#navigation li {
float:left;
margin:0px 1px 0px 1px;
padding:0;
list-style:none;
white-space:nowrap;
/*background-color:#f7f7f7;*/

}

ul#navigation li a {
display:block;
padding:0 5px;
text-transform:uppercase;
border:none;
color:#506373;
text-decoration:none;
}

ul#navigation li a:hover,ul#navigation li a:active, ul#navigation li.current_page_item a{
color:#fff;
}

#header {
width: 900px;
height:240px;
margin: 0px;
padding:0px;
color:#fff;
background: url(images/bgheader.jpg) repeat-x;
border-bottom:3px solid #627c8d;
}

#header_pic {
width:900px;
height:80px;
margin: 0px;
padding:0px;
overflow:hidden;
}

#headerimg {
width:550px;
height:88px;
padding:10px 0px 0px 20px;
margin:0px;
overflow:hidden;
float:left;
}

/*#headerimg h1, h1 a, h1 a:hover{
padding:0px;
margin:0px;
color:#2f383e;
text-decoration:none;
font-size:24px;
}*/

.description {
padding:0px;
margin-top:-10px;
color:#333;
}

#wrapper {
width: 900px;
padding:0px;
margin:0px;
overflow:hidden;
}

#content {
float:right;
width:535px;
padding:10px 30px 10px 10px;
margin:0px;
overflow:hidden;
}

#sidebar {
width: 130px;
float:left;
padding:0px;
margin-top:10px;
overflow:hidden;
}

#siderail {
width: 300px;
float:left;
padding:10px;
margin-top:0px;
overflow:hidden;
}

#footer {
width: 900px;
padding:0px;
margin:0 auto;
overflow:hidden;
}

#footer .sub{
margin:0px;
color:#1c2839;
background-color: #3f5d89;
text-align:right;
padding:5px;
border-top:2px;
}

#footer .sub a{
color:#1c2839;
padding:0px;
margin:0px;
}
/*-- adsense container --*/

#link_unit_top_container{
width:900px;
height:29px;
padding:0px;
margin-top:1px;
overflow:hidden;
background:url(images/bg_nav.gif) right no-repeat;
float:left;
}

#link_unit_top {
width:728px;
height:15px;
padding:0px;
margin:0 auto;
margin-right: 20px;
margin-top:3px;
overflow:hidden;
}

#link_unit_side_container{
width:120px;
padding:0px;
margin-left:10px;
margin-top:10px;
overflow:hidden;
}

#link_unit_side {
padding:0px;
margin-left:0px;
margin-top:0px;
overflow:hidden;
}

#skyscraper_top {
color:#fff;
font-size: 12px;
font-weight:bold;
padding:0px;
margin-top:10px;
overflow:hidden;
width: 163px;
float:right;
}

#skyscraper {
float:right;
width:160px;
border:0px solid #d8dfe6;
margin-top:0px;
padding-top:0px;
}

#leaderboard_container {
width:900px;
height:76px;
margin:0 auto;
padding-top:10px;
float:left;
}

#leaderboard {
width:728px;
height:90px;
margin:0 auto;
margin-top:10px;
}

#half_banner {
width:234px;
margin:0;
padding:0px;
}

search_container {
width:250px;
padding:0px;
margin:0px;
float:right;
}
/*-------------Headings-------------*/

h1 {
padding:0px;
margin:0px;
}

h2 {
padding:0px;
margin:0px;

}

h3 {
padding:0px;
margin:0px;

}

h4 {
padding:0px;
margin:0px;

}

h5 {
padding:0px;
margin:0px;

}

/*-------------The Post-------------*/

#title {
float:left;
width:550px;
padding:0px;
margin-bottom:10px;
}

#title .post_title {
padding-left:10px;
margin:0px;
float:left;
color:#62778c;
font-size:18px;
text-decoration:none;
}

.post_title {
padding-left:10px;
margin:0px;
float:left;
color:#62778c;
font-size:18px;
text-decoration:none;
}

#title .post_title a { color:#62778c; text-decoration:none; }

#title .post_title a:hover { color:#721b00; text-decoration:underline; }

#post h2 {
padding-left:10px;
margin:0px;
float:left;
color:#62778c;
font-size:18px;
text-decoration:none;
}

.post {
padding:0px;
margin-bottom:20px;
}

#title_container {
margin:10px 0px;
width:556px;
float:left;
}

.post .title {
border-bottom:1px solid #5b564a;
padding-bottom:2px;
margin:0px;
float:left;
width:470px;
font-size:18px;
}

.post a { color:#3b6283; text-decoration:none; }

.post a:hover { color:#6da1c6; text-decoration:none; }

.post p {
padding:0px;
margin:0px;
text-align:justify;
}

.post ul {

}

.post li {

}

.post .entry {
padding:0px;
margin:10px 0px;
}

.entrytext .postmetadata {

}

.postmetadata alt {

}

.postmetadata a {

}

.navigation {

}

.alignleft {

}

.alignright {

}

.center {

}

.pagetitle {
padding-bottom:10px;
color:#666666;
}

blockquote {
border-left:2px solid #767467;
padding-left:10px;
}

cite {

}

img {
padding: 4px;
margin: 2px 10px 10px 0px;
border: none;
text-align: center;
}

img.center, img[align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}

img.left, img[align="left"] {
float:left;
margin: 5px 5px 5px 0px;
border-style:dashed;
border-width:thin;
border-color: #0066FF;
}

img.right, img[align="right"] {
float:right;
margin: 2px 0px 5px 10px;
}

/*acronym, abbr {

}

/* -- post info -- */

.post-info {
color:#999;
margin:0;
padding:10px 0;
border-top:#5b564a 1px dashed;
clear:both;
font-size:0.9em;
}

.post-info em {
color:#666;
font-style:normal;
}

.post-info em.user {
background:url(images/user.gif) no-repeat left center;
padding:2px 0 2px 12px;
}

.post-info em.cat {
background:url(images/category.gif) no-repeat left center;
padding:2px 0 2px 12px;
}

.post-info a:link, .post-info a:visited {
border:none;
text-decoration:none;
color:#bcac82;
}

.post-info a:hover, .post-info a:active {
border-bottom:1px dashed;
color:#ce5300;
text-decoration:none;
}

.post-comments
{
float:right;
}
.post-comments a
{
background:url(images/comments-small.gif) no-repeat left center;
padding-left:12px;
color:#838e99;
}

#post_single {
border-bottom:1px dashed #5b564a;
float:left;
width:540px;
padding:10px 0px 5px 0px;
}

#post_single_title {
float:left;
width:85px;
padding:0px;
margin:0px;
}

#post_single_description {
float:left;
width:450px;
padding:0px;
margin:0px;
}
/*--------------Sidebar------------*/

#sidebar {
width:120px;
padding:0px;
margin:0px;
color:#333;
float:left;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:11.5px;
}

.side-title {
color:#3b6283;
font-size:18px;
font-variant:small-caps;
}

.side-box {
padding:0px;
margin:5px 0px 10px 0px;
}

#sidebar ul {
padding:0px;
margin:0px;
}

#sidebar ul h3 {
height:15px;
color:#3b6283;
font-size: 12px;
font-weight:bold;
padding:5px 5px;
}

#sidebar ul li {
/*background: url(images/bullet-orange.gif) no-repeat;*/
padding-left: 15px ;
line-height:18px;
margin:0px;
}

#sidebar ul li ul li {
background: url(images/bullet-grey.gif) no-repeat;
padding-left: 12px ;
}

#sidebar ul ul {
padding:0px;
margin:0px;
}

#sidebar ul ul li {
background-image:none;
}

#sidebar ul ul ul {

}

#sidebar p {

}

#sidebar a {
color:#333;
text-decoration:underline;

}
#sidebar a:hover {
color:#4c4c4c;
text-decoration:underline;
}

/*--------------Comments--------------*/
#respond {
padding-top:20px;
margin-top:10px;
color:#4e6565;
}

ol.commentlist {

}

ol.commentlist li {

}

ol.commentlist li.alt {

}

ol.commentlist a {

}

small.commentmetadata {

}

/*--------------Search Form-------------*/

#searchform {
padding:0px;
margin:0px;
}

#searchform input {
border:1px solid #999999;
}

#searchform #s {
padding:0px;
margin:0px;

}

/*-------------Calendar-----------------*/

.post_date {
float:left;
color:#999;
font:18px Arial Narrrow, Helvetica, sans-serif;
font-weight:bolder;
}

#wp-calendar {

}

#wp-calendar th {

}

#wp-calendar a {

}

#prev a, #next a {

}

#wp-calendar caption {

}

#date {
float:left;
width:53px;
height:58px;
background:url(images/bg_date.jpg) no-repeat;
padding-left:3px;
margin-right:10px;
}

#date .y {
text-align:left;
font:10px bolder Verdana, Arial, Helvetica, sans-serif;
color:#f1af15;
font-weight:bold;
margin-top:-1px;
padding-left:6px;
}

#date .d {
text-align:center;
font:10px bolder Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
font-weight:bold;
margin-top:2px;
}

#date .m {
text-align:center;
font:11px bolder Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#fff;
margin-top:-2px;
}

#date .j {
text-align:center;
font:22px bolder Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
font-weight:bold;
margin-top:-2px;
}

/*-------------Images------------------*/

/*-------------Other------------------*/
.sidebox-group {
width:120px;
padding:0 0px 10px;
}
* html .sidebox-group {
width: 120px;
padding-bottom:0;
}

.sidebox {
margin-right:10px;
padding:0px;
border:none;
clear: both;
float:left;
}

/* handles */
.sidebox-handle {
/*background:url(images/side_box_top.jpg) no-repeat;*/
height:15px;
color:#c12d00;
font-size: 12px;
font-weight:bold;
padding:5px 5px;
margin:0px;
width: 120px;
}
* html .sidebox-handle {
width: 120px;
}

/* inner content area */
.sidebox-content {
float:left;
width:119px;
padding:5px 5px 0px 5px;
margin-bottom:10px;
color:#3a4d52;
overflow:hidden;
display:inline;
}

.sidebox-content a{
color:#333;
text-decoration:underline;
overflow:hidden;
}

.sidebox-content a:hover{
color:#3a4d52;
text-decoration:none;
overflow:hidden;
}

/*-------------SiteNav------------------*/
#sitenav {
width: 900px;
padding:0px 20px 10px 20px;
margin:0 auto;
background-color:#8ca9c3;
overflow:hidden;
}

#sitenav .title {
border-bottom:3px solid #434e57;
font-size:12px;
font-weight:bold;
padding:3px;
margin:0px;
color:#434e57;
}

#sitenav .box {
font-size:11px;
width:200px;
float:left;
padding:0px;
margin:10px 10px 10px 10px;
}

#sitenav .box ul {
padding:5px 0px 0px 20px;
margin:0px;
}

#sitenav .box li {
list-style-type:square;
padding:3px 0px 3px 0px;
border-bottom:1px dashed #434e57;
margin:0px;
color:#fff;
}

#sitenav .box li a{
color:#333;
text-decoration:none;
}

#sitenav .box li a:hover{
color:#fff;
text-decoration:underline;
}

#sitenav .box2 {
font-size:11px;
width:400px;
float:left;
padding:0px;
margin:10px;
}

#sitenav .box2 ul {
padding:5px 0px 0px 20px;
margin:0px;
}

#sitenav .box2 li {
list-style-type:square;
padding:3px 0px 3px 0px;
border-bottom:1px dashed #434e57;
margin:0px;
color:#fff;
}

#sitenav .box2 li a{
color:#333;
text-decoration:none;
}

#sitenav .box2 li a:hover{
color:#fff;
text-decoration:underline;
}

Thanks in advance. Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your HTML has got a lot of

Your HTML has got a lot of errors in it. Past that I'm not really sure what you people to comment on. I looked at the site in Firefox and it looks OK. If there are problems, you'll need to be more specific about them.

Also, for your download mix links, when clicking on http://www.numixes.com/wp-content/plugins/wp-downloadMonitor/download.php the browser should prompt the user to open or save rather than play with whatever plugin is installed (I've got Quicktime installed and so the MP3 plays in a browser window).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

Thanks, Well the html is

Thanks,

Well the html is generated by wordpress so not much I can do about that. As for the links, it's just a setting of quicktime that plays mp3 files instead of allowing you to download them. But I guess I'd probably be better off without the download monitor.

I'm more so confused about my css and its handling of images and video items. For example, when I import a youtube video to my blog, then try to edit it (ie the title), my whole page layout gets shredded. Here's a screenshot of that: numixes.com/shredded.jpg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

lordgryn wrote:Well the html

lordgryn wrote:
Well the html is generated by wordpress so not much I can do about that.

Of course there is. You can edit the template files.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

you mean the wordpress

you mean the wordpress general-template.php file? I don't know what that would do.. but I'd still like to fix my css so that things look they way i'd like them too Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, the files in your theme

No, the files in your theme folder - that's where the HTML is coming from. Nearly all the HTML that appears on a WP site is controllable by the designer and you can't expect your CSS to work correctly when you've got errors in your HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

I'm sorry mate, I'm very new

I'm sorry mate, I'm very new to all this, I wouldn't even be able to point out the Html errors you speak of :/ could you give an example?

Triumph (not verified)
Anonymous's picture
Guru

Tyssen wrote:lordgryn

Tyssen wrote:
lordgryn wrote:
Well the html is generated by wordpress so not much I can do about that.

Of course there is. You can edit the template files.

Yes, I was going to say that both Tyssen and I run wordpress blogs and you'd be hard pressed to find a markup error at either site.

/wp-content/themes/{your_currently_selected_theme_folder} are the files you'll need to modify.

When you say your <p> and <br> tags are disappearing are you using the editor in visual mode or code mode?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

lordgryn wrote:I wouldn't

lordgryn wrote:
I wouldn't even be able to point out the Html errors you speak of :/ could you give an example?

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.numixes.com%2F

That's all of them on the home page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

I know this as I've modified

I know this as I've modified the whole theme (it was my first time and I tried anyway), it was worse before - I've been told that it's my css that is making some parts act weird, ie paragraph spacing dissapearing .. and other weird things like the link I posted earlier showing how a simple youtube clip destroyed my layout.

someone told me to use p {
margin-bottom: 1.4em;
}

but that doesn't seem to work..

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

woah thanks, I will have to

woah thanks, I will have to take a look at this and do what I can.

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

I tried testing some other

I tried testing some other sites too see if they had 'errors' I found that a lot had more errors than mine, google.com has 55 errors, what kind of check is this?? seems more like just warnings

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you read the rules for

If you read the rules for this forum, before asking questions you're s'posed to make sure both your HTML & CSS are valid. Don't worry about what anyone else is doing; if you want your site fixed and you want help from this forum, you need to fix the errors (they're not warnings). Google doesn't even have a doctype so they're not a good example.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

Forgive me, I thought my

Forgive me, I thought my problems were due to some minor css to start with. I guess I have 73 errors to try to fix.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problems with CSS can't be

Problems with CSS can't be divorced from problems with HTML. CSS is applied to the HTML. If the HTML is broken, then it's highly likely the CSS will be too.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thesmu
thesmu's picture
Offline
Regular
Last seen: 13 years 12 weeks ago
Joined: 2007-08-07
Posts: 22
Points: 0

a couple of other suggestions..

firstly - are you using the wysiwyg editor? if so - it's probably causing some of your paragraph and line break problems when you edit. i've found that even switching between it and code is no good it still does it, this seems to be much worse in the more recent generations of wordpress too..
so i would suggest going to your user page in the dashboard and unchecking your wysiwyg - it means you will have to put each paragraph break and line break in yourself

paragraph:


content


line break:



it might seem a bit daunting at first but the preview on wordpress is really reliable so you should be ok Laughing out loud

about youtube videos - this happens to me EVERY time i re-edit a post with a youtube clip in wordpress, here's what to do...

the code you embeded from youtube looks like this:

but when you go back into it for some weird reason wordpress always puts a paragraph break before the param so that it looks like this:

and kills your page Sad
so, basically you just need to edit out that break and it should be fine Wink

also about your html errors - are you copy/pasting your text in at all, like from word or something similar? that can cause problems.
shutting off the wysiwyg should help with this too because the code it produces can be horrible - especially if you use font styling and so on.

also in the options > writing menu there is a check box for
"WordPress should correct invalidly nested XHTML automatically"
might help to tick that if you haven't already...

hope some of this help Smile

lordgryn
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-02-20
Posts: 9
Points: 0

thanks for the detailed

thanks for the detailed reply Smile

I've tried using
and

tags to space out my posts, and I've also tried turning off the wysiwyg editor.. today I found that
is the only thing that works for spacing, so I'm quite pleased Smile

Thanks for the youtube video fix, I'll have to try that out in a second! strange how new versions of wordpress are becoming unreliable when it comes to posting..

I don't copy/paste my text, it's all written in my browser, I've turned wysiwyg back on after it didn't help with my spacing, but if you said it can create html errors perhaps I will just turn it off again I don't mind putting in a bit of extra code myself.

and thanks, hopefully having now turned on "WordPress should correct invalidly nested XHTML automatically" will help sort out some of the other problems.

Thanks again Laughing out loud

thesmu
thesmu's picture
Offline
Regular
Last seen: 13 years 12 weeks ago
Joined: 2007-08-07
Posts: 22
Points: 0

no worries ;)

hope it works out...
glad to help!