Error triggered by using double border property

I'm currently working on a simple form template and its corresponding style sheet, but I've encountered an issue. When using the "double" border property to style forms, it seems to push the border beyond the containing element, which is affecting the overall appearance of the form.

Here's a link to a fiddle showcasing the problem: http://jsfiddle.net/Y9nFw/

Check out the CSS code below:

form {
  margin:0;
  padding:0;
}

fieldset {
  font: normal 12px "Lucida Grande", Verdana, san-serif;
  margin:0 0 10px 0;
  padding:5px;
  border:1px solid #333;
}

legend  {
  background-color: #DDD;
  margin:0;
  padding:5px;
  border-style:solid;
  border-width:1px;
  border-color:#FFF #AAA #666 #FFF;
}

#name, #email, #message, #subject {
  width:100%;
}

label {
  font-weight:bold;
}

input, textarea {
  border:3px double #333;
}

And here's the xhtml markup for the form:

<html>
  <head>
    <title>Chapter 9: Forms</title>
    <link rel="stylesheet" type="text/css" href="css/screen/forms_table.css" />
    </head>

  <body>
      <form action="" method="post" id="enquiryform">
          <fieldset>
              <legend>Enquiry Form</legend>
                <table cellspacing="3" cellpadding="3" border="1">
                  <tr>
                      <td colspan="2">Fields market * are complusory.</td>
                </tr>
                <tr>
                  <td><label for="subject">Subject *</label></td>
                    <td><select name="subject" id="subject" tabindex="1">
                      <option value="">Select</option>
                        <option value="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                    </select></td>
                </tr>
                <tr>
                  <td><label for="name">Name *</label></td>
                    <td><input type="text" name="name" id="name" tabindex="2" /></td>
                </tr>
                <tr>
                  <td><label for="email">Email *</label></td>
                    <td><input type="text" name="email" id="email" tabindex="3" /></td>
                </tr>
                <tr>
                  <td colspan="2"><label for="message">Message or enquiry below</label></td>
                </tr>
                <tr>
                  <td colspan="2"><textarea name="message" id="message"
                    rows="11" cols="30" tabindex="4"></textarea></td>
                </tr>
                <tr>
                  <td><label for="updates">I would like to receive updates: </label></td>
                    <td><input type="checkbox" name="updates" id="updates" value="n" tabindex="5" /></td>
                </tr> 
            </table>
        </fieldset>
        <input type=submit value="Send this enquiry" />
    </form>

Answer №1

Make sure to include the box-sizing:border-box property in the styles for your input elements:

input, textarea {
    border:3px double #333;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing:border-box;
}

Check out this example on jsFiddle

Answer №2

Implement the box-sizing style for both input and textarea

inpinput, textarea{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox*/
    box-sizing: border-box; 
}

Check out this example fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific li ...

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller trans ...

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

Placing an image in context with the background image

Looking for guidance on CSS styling. I have successfully set up a responsive background image on my page and now want to add a circular logo positioned at the bottom center of it. However, I am facing an issue where the logo's position changes when th ...

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...

The picture is not visible outside the parent container - why is it hidden?

Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

How to centrally position an image within a cropped parent container using CSS

Is there a way to center an img within a parent div tag that has overflow: hidden set? I am looking to clip the image equally on both sides in order to display the middle portion. <div class='wrapper'> <img/> </div> The desi ...

Converting Rich Text Format (RTF) Data to HTML: A Step-by

I have information stored in RTF Format within an MS Access Database. The format is as follows: {\rtf1\ansi\deff0\deftab720{\fonttbl{\f0\fswiss MS Sans Serif;}{\f1\froman\fcharset2 Symbol;}{\f2\f ...

merge PHP variables together

Currently in the process of constructing a string for the picture information in a lightbox gallery display. Initially, I used this snippet: <td><div style='height:175px;'></div></td><td><a href='images/memw ...

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

The "if" statement carries out the identical action each time it is executed

Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2. Below is the code snippet in question: $(function() { var turn = 2; ...

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

Adjust the text to fit neatly within a circular-shaped column container

I am currently working with Bootstrap 5 and I have a row with two columns positioned next to each other. My goal is to apply rounded borders to the left column while ensuring that the content remains within the div. Below is the code snippet: <div clas ...

Begin 5 seconds after loading

First time attempting this task. My goal is to trigger the loading of an I have been trying to write a script for this, but it's not functioning as expected. HTML : <div id="div1"> <a id="single" href="#">Single Play</a> & ...

"Experience the mesmerizing transition effects of Angular Bootstrap tabs as they gracefully glide in

I am currently working on implementing an animated slide effect when switching between tabs on a webpage. However, I have encountered some difficulties as the animation only seems to work partially. My approach involves using animate.css with the expectat ...

locomotory mesh decentralized sorting

I am attempting to implement in-browser sorting for my flexigrid. Currently, the grid is displaying data from a static XML file exactly how I want it, but the table itself does not sort because it is working off of local data. While researching solutions, ...