1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

CSS: Layout Problems

Discussion in 'Web Design & Development' started by Hirnsausen, Dec 16, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. Hirnsausen

    Hirnsausen Thread Starter

    Joined:
    Jul 26, 2008
    Messages:
    293
    Hi, I have two problems which it seems I cannot fix with my own knowledge. If here's someone who can assist me, I would be very happy.

    1. Borders with Round Edges
    At the left of the link provided below, you see a listing of files. I tried to get them surrounded with a border which contains rounded edges. However, I am not successful and no surrounding border is visible, not even with standard edges.

    2.
    At the top of the website, you see some links below arcs. Inside Mozilla browsers, everything looks just fine. But inside IE browsers, they look displaced and one even goes into a new line. There seem to be an invisible border around each of them which I can't get rid off. Please help.

    URL:
    http://www.jamaica-focus.com/SvenLi...auna/Birds/Hummingbird/100_1107_converted.flv

    Accessing the page will give you access to the HTML and CSS code.
     

    Attached Files:

    • CSS.jpg
      CSS.jpg
      File size:
      58.2 KB
      Views:
      100
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,301
    First Name:
    Colin
    You are using a table for this which doesn't help. Create a div which holds your table and style that with rounded corners. This is probably the easiest way to achieve what you want without a major re-design.
     
  3. Hirnsausen

    Hirnsausen Thread Starter

    Joined:
    Jul 26, 2008
    Messages:
    293
    Colinsp, thanks a lot for your help. Following your assistance, I have now replaced the table of the TITLE frame (top of the website) and got the link buttons to their proper position in Mozilla browsers and in IE browsers (problem #1). I have not yet started to implement your suggestion to solve #2 (will do soon).

    However, for problem #1 I still encounter one problem: the text input field below the rotating image: in Mozilla browsers it is located correctly and behaves fine, in IE browsers it is still misplaced (a few pixels too low) despite DIV usage, and when using the text input box (for typing), then the entire frame content moves upwards (which causes now all link buttons to be misplaced)!

    What could be the cause?
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,301
    First Name:
    Colin
    I suspect it is the errors on your page that are causing the problem. IE can be picky about them.

    Have a look here and correct the errors shown and then see how it is then.
     
  5. Hirnsausen

    Hirnsausen Thread Starter

    Joined:
    Jul 26, 2008
    Messages:
    293
    Thanks for the answer, I see those error messages. Good service, that website.

    I use now DIVs, and the position of the link graphics seems to be okay now. However, the text box is still a problem - in some browsers, when clicking it in order to write in it, it suddenly moves the contents of the entire frame upwards, like the height of the contents would exceed the frame's height (in those browsers). I tried by positioning that text field div on a bottom position, but now the effect is that the text box is TOO HIGH. Oh help...
     
  6. Hirnsausen

    Hirnsausen Thread Starter

    Joined:
    Jul 26, 2008
    Messages:
    293
    Nobody..?
     
  7. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1031543

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice