SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Wollongong, AUS
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stopping CSS overflow?

    hi

    I'm trying to make a widget using html and css.

    Here's how it looks on it's own: http://agelupdates.com/widget/

    (the CSS is embedded, so you can check it out)

    ....

    However when I add it into a site with an existing stylesheet in place it looks like this: http://www.agelezine.com/

    (hr gone, image in bottom left has white under it and list has an extra >>)


    So is there a way that I can modify the CSS in the widget so no styling from other stylesheets affects how it looks?

    As I want people to be able to add this to any site and not have the styling affected.

    Any help would be greatly appreciated.

    cheers
    nathan
    pixTower - an interesting and entertaining way of advertising!

  2. #2
    SitePoint Guru rockit's Avatar
    Join Date
    Sep 2005
    Location
    Canada
    Posts
    637
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it may have something to do with the doctype specified. if you're using xhtml, i think the correct syntax is <hr />. or, why not just add a bottom border to the element beforehand. also, if you're using multiple style sheets ensure that you specify margins and paddings for the elements in your widget and they are all either using a class or an id. also, any time you have an error validate your code.

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #id {
      color: pink; !important;
      width: 500px !important;
      font-size: 15px !important;
    }
    etc... At the bottom of the style-sheet(s).

    If the content inside this 'widget' of yours will stays the same on all sites, you'll probalby be better off with <object>, <embed> or <iframe>.

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Wollongong, AUS
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all I think I've got it sorted now
    pixTower - an interesting and entertaining way of advertising!

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Wollongong, AUS
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    If the content inside this 'widget' of yours will stays the same on all sites, you'll probalby be better off with <object>, <embed> or <iframe>.
    Got a few more q's...

    How exactly would I use the object or embed codes?

    Is there a quick and easy way to turn the CSS/HTML widget I've made into a quick javascript code which people can insert into their site html?

    cheers
    nathan
    pixTower - an interesting and entertaining way of advertising!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •