Member Avatar for Carian

Hi all,

First - I am a novice at web design, so bear with me and I know my code and everything else is not perfect, but I'm slowly learning. :)

I have designed a site for a cat breeder, she wanted to edit it herself so I tried to design it in a simple fashion for her with tables.

In IE, there is a gap. I dont see it in chrome or FireFox.

http://www.tisanticattery.com/index.htm

I thought I fixed it on this page below, I dont see it, but she claims she still does:

http://www.tisanticattery.com/birmankits.htm

Can someone help me with this gap?

I know nested tables are not the way to go, but how could I make this design with css so that the left side will flow down properly?

I also know now that I should use an attached style sheet, but this site does not have one.

Thank you so much for any help! I am currently reading books and taking online classes, but for now I really need help with this to make the site owner happy.

~ Carian

  • 3 Contributors
  • 6 Replies
  • 159 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by macneato

Recommended Answers

All 6 Replies

Member Avatar for macneato

I would suggest a very simple style reset. Try

* {
  margin: 0;
  padding: 0;
}
Member Avatar for Carian

Hi - thank you for the reply. Where exactly would I put that? For the entire page, or just for the table cell that is giving me the gap?

thanks!

Member Avatar for JameB

You make a file called reset.css where you have your existing stylesheet and import that stylesheet before you import your actual stylesheet.

Many browsers apply some "default" styles to the elements. When IE, Chrome, and FF apply differently, it shows difference. By resetting CSS you are creating an ideal environment to render the page.

Good Luck!

<style type="text/css" media="all"> @import url(/reset.css); @import url(/style.css); </style>
Edited by JameB because: n/a
Member Avatar for macneato

Umh, think for testing purposes, just add it into your head

<head>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
background-color: #A3AB86;
scrollbar-arrow-color: #77493A;
 scrollbar-base-color: #A3AB86;
 scrollbar-track-color:#C5C6A6;
} 
</style>

And see if it works first

Edited by macneato because: n/a
Member Avatar for Carian

Thank you for the help - I will try this tonite.

If anyone can point me in the direction of online resources, or books, that help in designing sites with divs and css and not tables, I would greatly appreciate it. My designs tend to be mostly graphic driven (most are for cat/dog breeders, artists, etc). So they are mostly "informational sites" with lots of photos and a nice visual effect, rather than anything really intense with scripts, databases, shopping carts, and such.

Thank you again, I will update later.

Carian

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.