Jump to content

paragraph of text has crazy outline.


wolfkin

Recommended Posts

http://www.userqqqq.123bemyhost.com/ (there are two style sheets)

 

I'm working on a new layout for this site I'm doing and I can't seem to figure out why this one area is all messed up.

so as you should be able to see what I'm trying to do is put a video below the nav bar and then some text to the right. The video part is find and dandy. The text by itself also looks alright. But when I add a border to the text box I get this crazy set of boxes instead of a single square like with the video (when I added a border). I would have left it alone but I'm trying to put a background behind the text (http://www.userqqqq.123bemyhost.com/images/schedule_background.jpg)

Whenever I add the background via the stylesheet I get a mess.

 

    




           type="application/x-shockwave-flash" 
           allowscriptaccess="always" 
           allowfullscreen="true" 
           width="500" 
           height="315">




Glorious Church Schedule:

For Worship:

Services Time:

Sun 11:00am - 1:00pm

For Learning:

Bible Study:

Friday 7:00pm - 9:00pm

How to find us
Location for Sunday Service and Bible Study is St. Paul School at Parliament and Queen St.80 Sackville St.

       Toronto, Ontario

       Canada.

CSS code.

#promovideo{
   width: 600px;
   float:left;
}
#schedule{
   width: 500px;
   border: .2em dotted #900;
   display: inline;
}

#schedule{
   width: 500px;
   border: .2em dotted #900;
   display: inline;
   background: url('../images/schedule_background.jpg');
   padding: 105px 50px 91px;
}

Edited by wolfkin
Link to comment
Share on other sites

When you remove the display: inline, the border goes where it needs to. I'd remove it, float the #schedule left as well, add a clearing div into the html following it - that should do it.

 

Also, I tried to validate your page - that's always the first thing you want to do when something isn't working - but it cannot be validated. You might want to look into that.

Link to comment
Share on other sites

thanks that does seem to have cleared up most of my issues. Turns out on top of the copyright symbol breaking stuff I also forgot to close a

tag and a bunch of other small things. At the moment it validates except for my youtube embed code, the twitter widget code and whatever stuff they add on at the hosting site.

 

I ended up with 100px of extra side room on the schedule. Maybe I just didn't understand the effects of padding correctly because if i change it from 500px to 400px.

 

I guess I just need to find a better picture than that projector screen and I'll be ok.

Edited by wolfkin
Link to comment
Share on other sites

At the moment it validates except for my youtube embed code, the twitter widget code and whatever stuff they add on at the hosting site.
Sometimes, we have to just live with a couple validation errors to be able to do certain things on a site - but overall, the validator is an excellent tool to help keep the code error-free and avoid issues.
Link to comment
Share on other sites

I ended up with 100px of extra side room on the schedule. Maybe I just didn't understand the effects of padding correctly because if i change it from 500px to 400px.

 

Padding + Inner Width = Width :) so if you want a box that's 400px wide and with 50px padding on each side then u'd set the width to 300px on the CSS and add the 50px padding * 2 and u get 400px

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...